将图像对齐到屏幕中央，按钮对齐到屏幕底部，但图像和按钮相邻

Question

我应该做什么改变来对齐底部的按钮?显示button部件的Buttons类在另一个文件中定义。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color(0xFFFFCCCC),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              'assets/images/TransperentBackgroundBlack.png',
              height: 250,
            ),
            
            Align(
              alignment:Alignment.bottomCenter,
            child:Buttons(),
            ),
            
          ],
        ),
      ),
    );
  }
}

Answer 1

如果你想在屏幕中间放置一个小部件(图像)，并在底部添加另一个小部件(按钮)而不删除第一个小部件，您可以将所有内容包装在Stack()小部件中，并使用Center()小部件作为图像，使用Positioned()小部件作为按钮。

:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Center(
            child: Container( // Your Image
              height: 100,
              width: 100,
              child: Placeholder(),
            ),
          ),
          Positioned(
            bottom: 0,
            child: Container( // Your Button
              height: 30,
              width: 100,
              child: Placeholder(),
            ),
          )
        ],
      ),
    );
  }
}

设备结果

Answer 2

你可以设置按钮在底部的appbar，并使标高为0.0，并使图像在中心小部件

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color(0xFFFFCCCC),
        body: Center(
          child:
            Image.asset(
              'assets/images/TransperentBackgroundBlack.png',
              height: 250,
            ),
        ),
      bottomNavigatorBar:BottomAppBar(
      child: Buttons(),         
        )
      ),
    );
  }
}