请参阅附加的快照。我在颤动中通过容器创建了这样的圆形框。但我正在寻找小部件。颤振有一个小部件吗？

Posted 2023-02-23

【中文标题】请参阅附加的快照。我在颤动中通过容器创建了这样的圆形框。但我正在寻找小部件。颤振有一个小部件吗？

【英文标题】：See attached snapshot. I have created such circle box through container in flutter. But I am seeking for widget. Do flutter have a widget for it?

【发布时间】：2021-10-10 14:44:43

【问题描述】：

嗨。我附上了一张快照。谁能告诉我如何在一个小部件中获取此圆形图像和下方文本？颤振中有这样的单个小部件吗？而不是使用 3 个小部件列、容器和文本小部件。

[![附加快照][1]] [1]：https://i.stack.imgur.com/TlLwK.png

【问题讨论】：

你试过CircleAvatar吗？

或IconButton?

@HasanAbbasi 我现在尝试了 CircleAvatar。我得到了圆圈框和里面的图像。但是当我在其子属性中放置一个文本框时，它会在圆形框中给出文本而不是在圆形框下方。

@pskink 我现在尝试了 IconButton。但它没有在圆形框中给出图像，因为它没有半径属性，也没有通过颜色属性改变背景颜色。

是的，我知道！您应该在列中使用 circleAvatar 而不是 Container。这是您代码的唯一修改！

【参考方案1】：

试试下面的代码希望它能解决你的问题：

ButtonBar(
              alignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () ,
                      child: Icon(Icons.check, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Nike'),
                    ),
                  ],
                ),
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () ,
                      child: Icon(Icons.add, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Add'),
                    ),
                  ],
                ),
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () ,
                      child: Icon(Icons.edit, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Edit'),
                    ),
                  ],
                ),
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () ,
                      child: Icon(Icons.menu, color: Colors.white),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(20),
                        primary: Colors.grey, // <-- Button color
                        onPrimary: Colors.red, // <-- Splash color
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Menu'),
                    ),
                  ],
                ),
              ],
            ),

你的屏幕喜欢 ->

【参考方案2】：

你可以添加圆形头像来制作你喜欢的图片

             Container(
                  padding: EdgeInsets.only(left: 15, right: 15, top: 10),
                  child: Row(
                    children: [
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Container(
                            height: 40,
                            width: 40,
                            child: CircleAvatar(
                                backgroundImage: AssetImage("")),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Nike'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),