连续的小部件没有均匀地间隔开

如何解决连续的小部件没有均匀地间隔开

我正在尝试制作一个小部件来显示用户在社交媒体平台上发布的帖子，我想在帖子中包含某些元素，其中之一是他在创建帖子时可能附加的外部链接。 我希望这些链接由圆形按钮表示（我已经通过使用 Clipoval 设法实现了这一点），并且我希望这些椭圆形与中心等距地排成一排。

到目前为止，我能够将它们隔开的唯一方法是添加一定宽度的 SizedBox(s)。但这对于不同的帖子效率不高，链接数量可能不同，因此椭圆的数量也不同。这样看起来会很乱。

我使用堆栈将行叠加在帖子图像的顶部（我已对其应用线性渐变以使按钮可见）。

这是我的代码

class postTemplate extends StatelessWidget {
  List <String> tags = ['tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(height: 150,),Container(
            height: 450,child: Stack(
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,children: [
                    SizedBox(height: 20,Card(
                      elevation: 8.0,shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(32)
                      ),color: Colors.white,child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,children: [
                          ListTile(
                            title: Padding(
                              padding: const EdgeInsets.only(left : 70.0),child: Text("Username"),subtitle: Padding(
                              padding: const EdgeInsets.only(top: 10.0,left: 80.0),child: Text("Hello"),Stack(
                            children: [
                              Container(
                                child: Container(
                                  foregrounddecoration:Boxdecoration(
                                    gradient: LinearGradient(
                            colors: [Colors.white,Colors.transparent],begin: Alignment.bottomCenter,end: Alignment.topCenter,stops: [0,0.3],child: Image(image: Assetimage('assets/images/modelPostimage.png'),fit: BoxFit.contain,)),Positioned(
                                bottom: 10.0,child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                                      SizedBox(width: 15,Container(
                                        width: 56,decoration: Boxdecoration(
                                          shape: BoxShape.circle,BoxShadow: [
                                            BoxShadow(
                                              color: Colors.black,blurRadius: 2.0,spreadRadius: 1.0,)
                                          ]
                                        ),child: Clipoval(
                                          child: Material(// button color
                                            child: InkWell(
                                              splashColor: Colors.red,// inkwell color
                                              child: SizedBox(width: 56,height: 56,child:Image(
                                                image: new Assetimage("assets/Icons/browser.jpg"),width: 32,height:32,color: null,fit: BoxFit.scaleDown,onTap: () {},SizedBox(width: 15,Container(
                                        width: 60,decoration: Boxdecoration(
                                            shape: BoxShape.circle,BoxShadow: [
                                              BoxShadow(
                                                color: Colors.black,)
                                            ]
                                        ),],Container(
                            height: 44,width: 350,decoration: Boxdecoration(
                              borderRadius: BorderRadius.all(Radius.circular(22))
                            ),child: ListView.builder(
                              scrollDirection: Axis.horizontal,itemCount: tags.length,itemBuilder: (BuildContext context,int index){
                                return Container(
                                  decoration: Boxdecoration(
                                      borderRadius: BorderRadius.circular(22),border: Border.all(color: Colors.black)
                                  ),margin: EdgeInsets.only(right: 13,left: 13),child: Padding(
                                    padding: const EdgeInsets.only(
                                        top: 10.0,bottom: 5.0,right: 20,left:20
                                    ),child: Text(tags[index],style: TextStyle(
                                          color: Colors.black
                                      ),);
                              },)
                  ],CircleAvatar(
                  radius: 42,backgroundImage: Assetimage('assets/Icons/profilelogo.jpg')
                )
              ],);
  }
}

任何帮助将不胜感激。

解决方法

用一个容器包裹并给它全宽并去除尺寸

                    Positioned(
                        bottom: 10.0,child: Container(
                            width:MediaQuery.of(context).size.width,child :Row(
                            crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                              Container(
                                width: 56,decoration: BoxDecoration(
                                  shape: BoxShape.circle,boxShadow: [
                                    BoxShadow(
                                      color: Colors.black,blurRadius: 2.0,spreadRadius: 1.0,)
                                  ]
                                ),child: ClipOval(
                                  child: Material(// button color
                                    child: InkWell(
                                      splashColor: Colors.red,// inkwell color
                                      child: SizedBox(width: 56,height: 56,child:Image(
                                        image: new AssetImage("assets/Icons/browser.jpg"),width: 32,height:32,color: null,fit: BoxFit.scaleDown,),onTap: () {},Container(
                                width: 60,decoration: BoxDecoration(
                                    shape: BoxShape.circle,boxShadow: [
                                      BoxShadow(
                                        color: Colors.black,)
                                    ]
                                ),],

,

有一个专门的小部件可以创建均匀的空间，而不是使用 SizedBox。用 https://animate.style/ 替换 SizedBox。