简体   繁体   English

无法更改 flutter 中按钮的高度

[英]Can't change the height of a button in flutter

I'm new to flutter. I'm trying to insert to the "AppBar" a simple "contained button" with text on it.我是 flutter 的新手。我正在尝试向“AppBar”插入一个带有文本的简单“包含按钮”。 (For example the material design "contained button" here ) (例如这里的材料设计“包含按钮”)

The problem is that no matter what height I insert in the Constructor, the button still fills the full height of the AppBar.问题是无论我在 Constructor 中插入什么高度,按钮仍然填满 AppBar 的整个高度。

I can visibly solve the problem with setting padding as I did in the example below, but it frustrates me that I don't understand why I can't change the button's height itself.我可以像下面的示例一样通过设置填充明显地解决问题,但令我沮丧的是我不明白为什么我不能自己更改按钮的高度。 I tried also to wrap it with a container or a sizedBox like shown in the answers here but it didn't make any visible change (still the button filled the whole appBar height)我也尝试用一个容器或一个 sizedBox 包装它,就像这里的答案所示,但它没有做出任何可见的变化(按钮仍然填满了整个 appBar 高度)

I would really appreciate it if also someone could explain to me why the code acts like that.如果有人能向我解释为什么代码会这样,我将不胜感激。

      appBar: AppBar(
      automaticallyImplyLeading: false,
      title: Text(widget.title),
      actions: <Widget>[
        Padding(
            padding: EdgeInsets.only(top: 7.0, bottom: 7),
            child: Container(
              width: 80,
              child: FlatButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  color: Color.fromRGBO(58, 90, 128, 1),
                  onPressed: () {},
                  child: Text('Button')
              ),
            )
        ),
        ]
  )

I think AppBar() is following the material design guidelines for AppBar .我认为AppBar()遵循AppBar 的材料设计指南

Also this is related with the Material Scaffold() widget.这也与 Material Scaffold()小部件有关。

You can take a look at this documentation你可以看看这个文档

In this particular case , I think the best way to control the height is using a Padding() around.在这种特殊情况下,我认为控制高度的最佳方法是使用Padding() You can erase the Container in your code.您可以在代码中擦除容器。

appBar: AppBar(
    automaticallyImplyLeading: false,
    title: Text(widget.title),
    actions: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlatButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5.0),
            ),
            color: Color.fromRGBO(58, 90, 128, 1),
            onPressed: () {},
            child: Text('Button')),
      ),
    ]),

You can control the full AppBar size using PreferredSize() , but this has no relation with the buttons height.您可以使用PreferredSize()控制完整的 AppBar 大小,但这与按钮高度无关。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM