如何给所有 Row 孩子相同的高度

Posted 2023-02-23

【中文标题】如何给所有 Row 孩子相同的高度

【英文标题】：How to give all Row children the same height

【发布时间】：2020-12-15 12:32:21

【问题描述】：

我很难让 Row 的两个孩子，即 TextField 和 RaisedButton 的高度相同。按钮的高度总是较短。我可以用 SizedBox 做到这一点，但它是固定高度并且是手动的。这是我的代码和 UI 现在的样子：

                   Row(
                     children: [
                       Padding(
                         padding: _padding,
                         child: SizedBox(
                           width: 200,
                           child: TextField(
                             keyboardType: TextInputType.number,
                             decoration: InputDecoration(
                                 labelText: 'Answer',
                                 border: OutlineInputBorder(borderRadius: BorderRadius.circular(4.0))
                             ),
                           ),
                         ),
                       ),
                       RaisedButton(
                         onPressed: _evaluate,
                         child: Text('Evaluate'),
                       ),
                     ],
                   ),

我想知道是否有推荐的方法如何使 Row 的孩子们的高度相同。

顺便说一下，侧面的黑线是模拟器框架的。

【参考方案1】：

用容器包裹textfield并给它高度是不好的，某些情况下textfield在打字时会破裂，你可以在你里面使用Textfield -> InputDecoration;

contentPadding: EdgeInsets.all(20),

您可以从这里调整文本字段的高度。

【参考方案2】：

您可以用SizedBox 小部件包装Row 小部件并为其提供所需的height：

我以你的代码为例添加了一个演示：

 SizedBox( // new line 
      height: 60, // give it a desired height here
      child: Row(
        children: [
          Padding(
            padding: _padding,
            child: SizedBox(
              width: 200,
              child: TextField(
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    labelText: 'Answer',
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(4.0))),
              ),
            ),
          ),
          RaisedButton(
            onPressed: _evaluate,
            child: Text('Evaluate'),
          ),
        ],
      ),
    ),

【讨论】：

我喜欢这个答案，但如果这一行是文本字段列的子行怎么办？如何保证行间距一致？

我真的不明白你想让我画什么样的例子，但Row 具有mainAxisAlignment 和crossAxisAlignment 的属性来分隔它的孩子。与Column

相同

【参考方案3】：

尝试用 SizedBox 或固定高度的容器包裹 Row