我正在用Dart开发一个应用程序,我发现布局非常简单.然而,我遇到了一个问题,我认为这与小部件之间的默认填充有关.

我在一列中有两个Ffltter ButtonRow,它们之间有相当大的间隙,我想要消除它们之间的间隙.我猜是填充物引起的,到目前为止已经try 了各种方法,但都没有成功.代码摘录如下:

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

推荐答案

您可以使用不同的方式自定义按钮:

使用什么取决于您的情况/要求.下面是不同方法的快速示例:

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"),
            ),
          ],
        )
      ]),
    );
  }
}

Example

在这种情况下,Debug paint可能会有帮助.

Example with debug paint

Dart相关问答推荐

在polymer和dart中将内容标签渲染为模板的一部分

StreamBuilder 会在无状态小部件中自动关闭流吗?

在dart polymer重复模板中获取索引

如何go 除字符串中的变音符号?

Flutter 如何移动文件

不要将 PageView 居中 - Flutter

Angular 2,使用 body 作为根 Select 器,而不是 my-app

属性 'docs' 不能无条件访问,因为接收到的可能是 'null' Flutter

Flutter:我应该在哪里调用 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark)

Flutter-键盘显示和隐藏导致生成调用

Flutter 错误:The _ScaffoldLayout custom multichild layout delegate forgot to lay out the following child

错误:无法将参数类型void Function(ImageInfo, bool)分配给参数类型ImageStreamListener

如何在 Flutter 中让 Android 状态栏变亮

如何在 Dart 中替换字符串中间的空格?

如何更改手机屏幕上的Flutter应用程序名称显示?

Dart 中 http 和 HttpClient 的区别

dart和下划线

Dart Nodejs 和 Socketio

CoffeeScript 和 Dart 对 JavaScript 的改进之间的主要区别是什么?

如何在 Dart 中将日期/时间字符串转换为 DateTime 对象?