Question

我正在图像上方创建按钮，我希望按钮位于图像底部中心

Widget buildBody() {
  return Stack(
    children: <Widget> [
      Image(
        image: new AssetImage('assets/homebg.png'),
      ), 
      Center(
        child:  RaisedButton( 
          onPressed: () => launch("tel://21213123123"),
          child: new Text("Call me")
        )
      ),
    ]
  );     
}

我希望按钮的输出应该在图片的底部

Answer 1

尝试添加alignment

Stack(
    alignment: Alignment.bottomCenter,
    children: <Widget>[
      Image(
        image: new AssetImage('assets/homebg.png'),
      ),
      Padding(
          padding: EdgeInsets.all(8.0),
          child: RaisedButton(
              onPressed: () => launch("tel://21213123123"),
              child: new Text("Call me")
          )
      ),
    ]
);

Answer 2

您可以尝试将Positioned小部件用作Stack的子级。

Stack(
    children: [
        Image(...),
        Positioned(
            left: 0.0,
            right: 0.0,
            bottom: 0.0, 
            child: yourChildWidget(),
        )
    ]
)

Answer 3

更好的一个，您可以在其中轻松添加更多按钮，

                   child: Stack(
                  children: [
                   //Your Image Here...
                    Align(
                      alignment: Alignment.topRight,
                      child: Padding(
                          padding: EdgeInsets.all(8.0),
                          child: IconButton(
                              onPressed: () => print("Closed")
                              icon: Icon(Icons.close))),
                    ),
                  ],
                ),

在孩子内部使用对齐并添加更多按钮并将它们对齐到您选择的任何位置，这是对@Andrey 以上答案的编辑，非常感谢。

抖动，如何将按钮放置在图像底部？

3 个答案: