在 Flutter 中，如何使 Button 和 Textfield 的高度相同？答案

【问题标题】：In Flutter, how to make Buttons and Textfields of same height?在 Flutter 中，如何使 Button 和 Textfield 的高度相同？
【发布时间】：2019-12-27 06:20:57
【问题描述】：

我知道TextField 有TextStyle，它有一个height 属性，它只是基于fontSize 的乘数，但是我怎样才能使所有小部件的高度相同（不管字体大小） ?

此外，是否有以下等效方法（在几乎任何其他编程语言中）：

btnLogin.height = txtPassword.height;

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

输出：（都具有完全相同的高度）

我认为最好的方法是首先找出TextField 的高度，然后将其用于您的RaisedButton，这是演示相同的完整示例代码。

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  double _height = 56; // dummy height
  GlobalKey _globalKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback((_) {
      setState(() {
        // height of the TextFormField is calculated here, and we call setState to assign this value to Button
        _height = _globalKey.currentContext.size.height;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            TextField(
              key: _globalKey,
              decoration: InputDecoration(hintText: "Email Adress"),
            ),
            TextField(decoration: InputDecoration(hintText: "Password")),
            SizedBox(height: 12),
            SizedBox(
              width: double.maxFinite,
              height: _height, // this is the height of TextField
              child: RaisedButton(
                onPressed: () {},
                child: Text("LOGIN TO MY ACCOUNT"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

这似乎是一种糟糕的做法 - 首先渲染并显示一些 UI，然后立即更改它的外观。
@creativecreatorormaybenot OP 要求的可以通过这种方式完成，除此之外，您还可以为所有这些设置固定高度，但这不是解决这个问题的好方法，我敢肯定在您看来，使用addPostFrameCallback、LayoutBuilder、IntrinsicHeight 等类型的小部件没有任何好处。
你真的应该得到高度并在布局期间调整它们。
较慢的渲染时间会导致卡顿。我看到你喜欢骇人听闻的解决方案，这很好。

【解决方案2】：

为简单起见，您可以使用以下代码：

Container(
  height: 210 , // Your fixed height*3 here (70*3=210)
  width : double.infinity,  
  padding: EdgeInsets.symmetric(horizontal: 8.0), //Add padding as per your convenience 
  child : Column(
    children: <Widget>[
      Expanded(TextField([...])),
      Expanded(TextField([...])),
      Expanded(RaisedButton([...])),
      ],
    ),
  )

您可以随意在小部件之间插入 Divider 小部件或 SizedBox，以根据您的要求提供更简洁的外观。

提示：与您在问题中描述问题的方式相比，Flutter 的方法略有不同，因此我建议您在继续之前查看更多 Flutter 的编码相关视频/博客。

【讨论】：

OP 实际上并没有寻找解决方法，将宽度限制为 400 和 TextField 到 70 的高度不是一个干净的方法，您只是在这里对所有内容进行硬编码.
我的主要重点是解决这个问题：所有人都应该有完全相同的高度。我已经更新了我的答案。
你认为 OP 不知道为所有小部件提供相同的高度吗？来吧，这不是一个常规问题，它有赏金。
我认为这个问题一开始就不应该有赏金。只是想帮助OP。就是这样。
@CopsOnRoad 我认为 OP 是 Flutter 的新手，需要一个更易于理解的解决方案。我从你的回答中学到了很多东西，因此投了赞成票:)