2

我是新来的颤振。我正在尝试在“AppBar”中插入一个带有文本的简单“包含按钮”。（例如这里的材料设计“包含按钮” ）

问题是，无论我在构造函数中插入什么高度，按钮仍然会填满 AppBar 的整个高度。

我可以像在下面的示例中那样通过设置填充明显地解决问题，但令我沮丧的是，我不明白为什么我不能更改按钮本身的高度。我也尝试用容器或 sizedBox 包装它，如答案中所示，但它没有做出任何可见的改变（按钮仍然填充了整个 appBar 的高度）

如果有人可以向我解释为什么代码会这样，我将不胜感激。

      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')
              ),
            )
        ),
        ]
  )
4

1 回答 1

2

我认为AppBar()遵循 AppBar 的材料设计指南。

这也与 MaterialScaffold()小部件有关。

你可以看看这个文档

在这种特殊情况下，我认为控制高度的最佳方法是使用Padding()环绕。您可以删除代码中的容器。

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')),
      ),
    ]),

您可以使用 控制完整的 AppBar 大小PreferredSize()，但这与按钮高度无关。

于 2020-04-12T21:10:47.553 回答