Flutter Button行填充 [英] Flutter ButtonRow padding

问题描述

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

我在列中有两个颤抖的ButtonRows，它们之间的渲染间隔相当大我想消除它们。我猜这是由填充引起的，到目前为止已经尝试了各种方法，但都没有成功。代码摘录如下：

  @override 
小部件构建（BuildContext上下文）{
返回新的脚手架（
 ... 
正文：new Column（
 ... 
子代：< Widget> [
 ... 
新Container（
保证金：new EdgeInsets.all（0.0），
子代：new Padding（
 padding：new EdgeInsets.all（0.0），
 child：new ButtonBar（
 ... 
子代：<小部件> [
新的MaterialButton（
 ... 
），
新的MaterialButton（
 ... 
），
），
），
），
），
新Container（
保证金：new EdgeInsets.all（0.0） ，
子级：new Padding（
 padding：new EdgeInsets.all（0 .0），
子项：new ButtonBar（
 ... 
子项：< Widget> [
 new MaterialButton（
 ... 
） ，
新的MaterialButton（
 ... 
），
]，
），
），
），
] ，
），
）; 
} 
  

解决方案

您有不同的自定义方式按钮：

• 自定义
  
  
  
  
  

  I am developing an app in Flutter with Dart and am generally finding layout quite straightforward. However, I am running into a problem which I think is related to default padding between widgets.

  I have two flutter ButtonRows in a Column which render with a quite large gap between them which I would like to eliminate. I guess it is caused by padding and have tried various approaches with no success so far. An extract from the code is as follows:

    @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(
                      ...
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }
  

  解决方案

  You have different ways to customize buttons:

  • customize ButtonTheme for ButtonBar
  • use Row instead of ButtonBar
  • implement your own button via InkWell
  • etc

  What to use depends on your cases/requirements. Here quick example of different ways:

  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 can be helpful in this case.

  这篇关于Flutter Button行填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！