Question

我试图将2个文本和一个图像对齐为FlatButton (like this)的子元素，但是不知何故元素未按应有的对齐方式。

我尝试使用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),
                      )
                    ],
                  ),
                  ),
              ), 
          ),

这是结果：Image

Answer 1

您可以逐步调试。首先，这是我和我的其他研究员开发人员一起使用的一种技术。在子参数中，传递Container，此容器将收到一种颜色，例如Colors.red，通过它您可以看到容器区域包含的大小。

此后，如果您想将内容Container集中在其中，以Center作为子元素，然后将此Center小部件的子元素传递，则可以传递图片，然后定义此图像的大小。

child: Container(
        color: Colors.red,
        child: Center(
          child: Image.asset('assets/daily_icon.png', width: 109, height: 109),
        ),
      ),

告诉我这是否对您有用。

Answer 2

用下面的代码替换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,),
                      ),
                    ),

                  ],
                ),
              ),

如何对齐FlatButton的子级

2 个答案: