Flutter：Row中的小部件未对齐答案

【问题标题】：Flutter: Widgets in Row are not alignedFlutter：Row中的小部件未对齐
【发布时间】：2020-11-18 19:47:47
【问题描述】：

我使用带有两个小部件的行小部件，一个文本小部件和一个图标按钮，但图标按钮未与文本对齐，我不知道该怎么做。这是给你看的截图

Row(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(left: 10),
        child: widgets[index],
      ),
      IconButton(
          icon: Icon(
            Icons.close,
            size: 25,
            color: Colors.grey,
          ),
          onPressed: () => {
                setState(() {
                  widgets.remove(widgets[index]);
                }),
              })
    ],
),

【问题讨论】：

标签： android ios flutter flutter-layout

【解决方案1】：

将CrossAxisAlignment.start 替换为CrossAxisAlignment.baseline 并添加textBaseline: TextBaseline.alphabetic，如下所示：

                Row(
                    mainAxisSize: MainAxisSize.min,
                    textBaseline: TextBaseline.alphabetic,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(left: 10),
                        child: widgets[index],
                      ),
                      IconButton(
                          icon: Icon(
                            Icons.close,
                            size: 25,
                            color: Colors.grey,
                          ),
                          onPressed: () => {
                                setState(() {
                                  widgets.remove(widgets[index]);
                                }),
                              })
                    ],
                  ),

您可能需要这个来确认：

【讨论】：

【解决方案2】：

使用mainAxisSize: MainAxisSize.min,

Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: Text(
                    'Theo',
                    style:
                        TextStyle(color: Colors.deepOrangeAccent, fontSize: 20),
                  ),
                ),
                IconButton(
                    icon: Icon(
                      Icons.close,
                      size: 25,
                      color: Colors.grey,
                    ),
                    onPressed: () => {})
              ],
            ),
          ),

输出：

【讨论】：

希望对您有所帮助，请您采纳答案，以便其他人参考。

【解决方案3】：

我用 InkWell 代替了 iconbutton，它可以工作

【讨论】：