Question

在Flutter中将2个按钮放置在卡中时遇到一些麻烦。我有这个

但是我想要这个：

我的这张卡按钮代码为：

new ButtonTheme.bar(
    child: new ButtonBar(
      alignment: MainAxisAlignment.start,
      children: <Widget>[
        Row(
          children: <Widget>[
            Column(
              children: <Widget>[
                new FlatButton(
                  child: Icon(
                    Icons.share,
                    color: Colors.white,
                  ),
                  color: Color.fromRGBO(68, 153, 213, 1.0),
                  shape: CircleBorder(),
                  onPressed: () {
                    Share.share(
                      data[index]["link"],
                    );
                  },
                ),
              ],
            ),
            Column(
              children: <Widget>[
                FlatButton(
                  color:
                  Color.fromRGBO(161, 108, 164, 1.0),
                  child: const Text('Read Article'),
                  shape: new RoundedRectangleBorder(
                      borderRadius:
                      new BorderRadius.circular(
                          30.0)),
                  textColor: Colors.white,
                  onPressed: () {
                    launch(data[index]["link"],
                        forceWebView: false);
                  },
                ),
              ],

            )
          ],
        ),

      ],
    ),

Answer 1

您可以在alignment或ButtonBar上使用其他Row：

alignment: MainAxisAlignment.spaceBetween

Answer 2

从documentation

ButtonBar.children：水平排列的按钮

我认为您正在做很多不必要的事情，要获得结果，只需将按钮放在ButtonBar内，而无需使用Row和Column

这样的多余布局小部件。

这是代码：

ButtonTheme.bar(
          child: new ButtonBar(
            alignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              FlatButton(
                child: Icon(
                  Icons.share,
                  color: Colors.white,
                ),
                color: Color.fromRGBO(68, 153, 213, 1.0),
                shape: CircleBorder(),
                onPressed: () {},
              ),
              FlatButton(
                color: Color.fromRGBO(161, 108, 164, 1.0),
                child: const Text('Read Article'),
                shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0)),
                textColor: Colors.white,
                onPressed: () {},
              ),
            ],
          ),
        ),

在卡中放置按钮。颤抖

2 个答案: