在 Flutter 中，如何使 Button 和 Textfield 的高度相同? [英] In Flutter, how to make Buttons and Textfields of same height?

问题描述

我知道 TextField 有 TextStyle，它有一个 height 属性，它只是一个基于 fontSize，但是如何使所有小部件的高度相同(无论字体大小)?

I know that TextField has TextStyle, which has a height property, which is just a multiplier based on fontSize, but how can I make all the widgets the same height (irrespective of font size)?

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

Additionally, is there an equivalent method of the following (in pretty much any other programming language):

btnLogin.height = txtPassword.height;

推荐答案

输出:(高度完全相同)

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

I think the best way to do it is to first find out height of TextField, and then use it for your RaisedButton, here is the full example code demonstrating the same.

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"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这篇关于在 Flutter 中，如何使 Button 和 Textfield 的高度相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！