【问题标题】:How to give all Row children the same height如何给所有 Row 孩子相同的高度
【发布时间】: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 的孩子们的高度相同。

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

【问题讨论】:

    标签: flutter flutter-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 具有mainAxisAlignmentcrossAxisAlignment 的属性来分隔它的孩子。与Column 相同
      【解决方案3】:

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

      【讨论】:

        猜你喜欢
        • 2017-03-22
        • 2021-11-27
        • 2019-05-05
        • 2020-11-10
        • 1970-01-01
        • 2021-09-10
        • 2015-05-31
        • 2021-11-14
        • 1970-01-01
        相关资源
        最近更新 更多