Flutter ButtonRow padding

Question

我正在使用Dart在Flutter中开发一个应用程序，我发现布局非常简单。但是，我遇到了一个问题，我认为这个问题与小部件之间的默认填充有关。

我在一个列中有两个飘动的ButtonRows，它们之间有很大的间隙，我想消除它们。我想这是由填充引起的，并尝试了各种方法，迄今为止没有成功。代码摘录如下：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      ...
      body: new Column(
        ...
        children: <Widget>[
          ...
          new Container(
            margin: new EdgeInsets.all(0.0),
            child: new Padding(
              padding: new EdgeInsets.all(0.0),
              child: new ButtonBar(
                ...
                children: <Widget>[
                  new MaterialButton(
                    ...
                  ),
                  new MaterialButton(
                    ...
                  ),
                ),
              ),
            ),
          ),
          new Container(
            margin: new EdgeInsets.all(0.0),
            child: new Padding(
              padding: new EdgeInsets.all(0.0),
              child: new ButtonBar(
                ...
                children: <Widget>[
                  new MaterialButton(
                    ...
                  ),
                  new MaterialButton(
                    ...
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

Answer 1

您可以通过不同的方式自定义按钮：

• 为ButtonBar
自定义ButtonTheme
• 使用Row代替ButtonBar
• 通过InkWell
实施您自己的按钮
• 等

使用方法取决于您的情况/要求。这里有不同方式的快速示例：

class ButtonRowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Buttons"),
      ),
      body: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
        new Container(
          child: new Text("widget ButtonBar:"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new ButtonBar(children: <Widget>[
          new FlatButton(
            child: new Text("Button 1"),
            onPressed: () => debugPrint("Button 1"),
          ),
          new FlatButton(
            child: new Text("Button 2"),
            onPressed: () => debugPrint("Button 2"),
          )
        ]),
        new Container(
          child: new Text("widget ButtonBar with custom ButtomTheme:"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new ButtonTheme(
          minWidth: 44.0,
          padding: new EdgeInsets.all(0.0),
          child: new ButtonBar(children: <Widget>[
            new FlatButton(
              child: new Text("Button 1"),
              onPressed: () => debugPrint("Button 1"),
            ),
            new FlatButton(
              child: new Text("Button 2"),
              onPressed: () => debugPrint("Button 2"),
            ),
          ]),
        ),
        new Container(
          child: new Text("widget Row with FlatButton:"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new Row(
          children: <Widget>[
            new FlatButton(
              child: new Text("Button 1"),
              onPressed: () => debugPrint("Button 1"),
            ),
            new FlatButton(
              child: new Text("Button 2"),
              onPressed: () => debugPrint("Button 2"),
            ),
          ],
        ),
        new Container(
          child: new Text("widget Row with InkWell"),
          margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        ),
        new Row(
          children: <Widget>[
            new InkWell(
              child: new Text("Button 1"),
              onTap: () => debugPrint("Button 1"),
            ),
            new InkWell(
              child: new Text("Button 2"),
              onTap: () => debugPrint("Button 2"),
            ),
          ],
        )
      ]),
    );
  }
}

在这种情况下，

Debug paint可能会有所帮助。

Answer 2

此外，ButtonBar本身具有您可以自定义的buttonPadding属性。

  

覆盖周围的ButtonThemeData.padding来定义   填充按钮的子项（通常是按钮的标签）。

     

如果为null，则它将使用周围的ButtonBarTheme.buttonPadding。   如果为null，则默认为左侧的8.0逻辑像素，   是的。

---

ButtonBar(
  buttonPadding: EdgeInsets.all(0),
  children: <Widget>[
    FlatButton(
      child: Text('Hello'),
      onPressed: () => print(),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
  ],
),