Question

如何在Flutter中建立一排左右两端均为圆形的按钮？我想在我的第一个Flutter应用中添加类似的内容。 imgur.com上的示例取自我的华为手机上的Messaging应用。

我可以做一系列单独的FloatingActionButton.extended，它们并排放置。或带有RoundedRectangleBorder的RaisedButtons行。但是这些看起来都有些奇怪-Two rounded buttons

我猜是

shape：new LeftRoundedRectangleBorder（borderRadius：new BorderRadius.circular（30）），

跟着

shape：new RightRoundedRectangleBorder（borderRadius：new BorderRadius.circular（30）），

可能还可以，除非它们实际上不存在。

我该如何在我的应用程序底部将小部件组合在一起以制作工具栏？我想我也应该对这完全是非标准的设计持开放态度，这就是为什么我发现它对代码有点挑战。谢谢。

Answer 1

    class RoundedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: SizedBox(
        height: 60.0,
        width: 250.0,
        child: Material(
          shape: StadiumBorder(),
          textStyle: Theme.of(context).textTheme.button,
          elevation: 6.0,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: RaisedButton(
                  elevation: 0.0,
                  color: Colors.white,
                  shape: new RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.horizontal(left: Radius.circular(50))),
                  child: Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.add,
                          color: Colors.green,
                          size: 30.0,
                        ),
                        Text("New Message")
                      ],
                    ),
                  ),
                  onPressed: () {},
                ),
              ),
              Expanded(
                child: RaisedButton(
                  elevation: 0.0,
                  color: Colors.white,
                  shape: new RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.horizontal(right: Radius.circular(50))),
                  child: Padding(
                    padding: const EdgeInsets.all(2.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.more_vert,
                          color: Colors.green,
                          size: 30.0,
                        ),
                        Text("More")
                      ],
                    ),
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
      body: Container(),
    );
  }
}

Flutter-第一个和最后一个具有圆形末端形状的按钮行

1 个答案: