首页 > 解决方案 > 如何对齐 FlatButton 的子元素

问题描述

我正在尝试将 2 个文本和一个图像作为 FlatButton 的子项(像这样)对齐,但不知何故,这些元素没有按应有的方式对齐。

我尝试使用 Stack、Align、Rows 等,但并没有真正成功(我也是飞镖或颤振的初学者)

new ButtonTheme(
          minWidth: 171,
          height: 176,
          child:new Container(
                decoration: new BoxDecoration(
                borderRadius: new BorderRadius.circular(19),
                gradient: new LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: [
                    Color(0xFF8F94FB),
                    Color(0xFF5D62D4)
                  ]
                )
                ),
                child: FlatButton(
                  onPressed: () => handleButtonClick(),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(19)
                  ),
                  child: new Stack(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.bottomLeft,
                        child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
                      )
                    ],
                  ),
                  ),
              ), 
          ),

这是结果:图片

标签: flutterdartflutter-layout

解决方案


用下面的代码替换你的 FlatButton,看看它是否适合你。

     FlatButton(
                padding: const EdgeInsets.all(0),
                onPressed: () => {

                },
                shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(19)
                ),
                child: new Stack(
                  children: <Widget>[
                    Container(
                      width: 109,
                      height: 109,
                      child: Align(
                        alignment: Alignment.bottomLeft,
                        child: Image.asset('assets/demo.png',fit: BoxFit.fitHeight,),
                      ),
                    ),

                  ],
                ),
              ),

推荐阅读