Question

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

                   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的孩子们具有相同的高度。

顺便说一句，侧面的黑线用于仿真器框架。

Answer 1

用容器包装文本框并给其高度不是很好，某些情况下键入时文本框会破裂，您可以在文本框内使用-> InputDecoration;

contentPadding: EdgeInsets.all(20),

您可以从此处调整文本字段的高度。

Answer 2

尝试用SizedBox或固定高度的容器包装行

Answer 3

您可以将Row小部件包裹在SizedBox小部件中，并为其提供所需的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儿童相同的身高

3 个答案: