在Flutter中，如何使按钮和文本字段的高度相同？ [英] 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中，如何使按钮和文本字段的高度相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！