Question

有人可以帮我得到第一个圆圈而不是第二个圆圈的布局吗？ image

我有这个功能：

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_%22G%22_Logo.svg/1200px-Google_%22G%22_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);
}

每当我向数组添加一个项目时，此函数就会在右侧添加一个小部件。但是我希望第一个在第二个之上，第二个在第二个之上，等等...

Answer 1

您可以使用Stack小部件：

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

Answer 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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如何重叠两个圆圈？

2 个答案: