颤振ButtonRow填充

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可能会有所帮助。