Блог

Главная - Вопросы по программированию - Как перекрыть два круга?

Как перекрыть два круга?

#flutter #flutter-layout

#flutter #flutter-макет

Вопрос:

Может кто-нибудь помочь мне получить этот макет с первым кругом поверх второго? изображение

У меня есть эта функция:

 Widget overlapped() {
  final overlap = 25;
  final items = [
    Container(
      padding: EdgeInsets.only(right: 2),
      decoration: new BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: CircleAvatar(
        radius: 22,
        backgroundImage: AssetImage('assets/example_logo.png'),
        backgroundColor: Colors.black,
      ),
    ),
    CircleAvatar(
        radius: 22,
        backgroundColor: Colors.white,
        child: ClipOval(
            child: Image.network(
          "https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_"G"_Logo.svg/1200px-Google_"G"_Logo.svg.png",
          errorBuilder: (context, exception, stackTrace) {
            return Container(color: Colors.white);
          },
          height: 35,
        ))),
    CircleAvatar(
        child: Text(' 2', style: TextStyle(color: Colors.white)),
        backgroundColor: Theme.of(context).canvasColor),
  ];

  List<Widget> stackLayers = List<Widget>.generate(items.length, (index) {
    return Container(
      padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
      child: items[index],
    );
  });

  return Stack(children: stackLayers);
}

Эта функция всякий раз, когда я добавляю элемент в массив, он добавляет виджет справа. Но я хочу, чтобы первый был выше второго, второй третьего и т.д…

Ответ №1:

вы могли бы использовать виджет стека :

         Stack(
         children:<Widget>:[
Positioned(
           right: 130.0, 
          child:Container(
        shape: BoxShape.circle,
          
     )
    ),
          Positioned(
           left: 130.0, 
          child:Container(
        shape: BoxShape.circle,
          
     )
    ),
    
        ]
        )

Комментарии:

1. Ответ более или менее правильный, но левый виджет должен быть после правого в children массиве, чтобы он был нарисован «поверх» правого виджета. Стек рисует своего первого дочернего элемента, затем второго поверх этого, затем третьего поверх этого и т. Д.

2. @nstosic, ты прав, я это пропустил, я отредактирую ответ.

3. @nstosic Нет ли способа изменить порядок в стеке? Я хочу, чтобы первый виджет в массиве был поверх второго, а второй поверх третьего.

4. Самым простым способом было бы изменить порядок в массиве. Последний Stack дочерний элемент всегда рисуется поверх первого. Вам нужно будет расширить RenderStack и переопределить void paint(PaintingContext context, Offset offset) , что довольно сложно сделать без побочных эффектов

Ответ №2:

Используйте Stack и Positioned вместе.

 import 'package:flutter/material.dart';

class OverLap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlap'),
      ),
      body: Container(
        padding: const EdgeInsets.all(8.0),
        width: 500.0,
        child: Stack(
          children: <Widget>[
            //Change according to your icon
            Icon(
              Icons.flaky,
              size: 50.0,
              color: Colors.red,
            ),
            Positioned(
              left: 20.0,
              //Change according to your icon
              child: Icon(
                Icons.flaky,
                size: 50.0,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}