Question

我应该做哪些改变来对齐底部的按钮。用于显示 Buttons 小部件的 button 类在另一个文件中定义。

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

如果你想让一个小部件（图像）在屏幕中间居中，并在底部添加另一个小部件（按钮）第一个小部件不下降，你可以把所有的都包裹在一个 { {1}} 小部件，对图像使用 Stack() 小部件，对按钮使用 Center() 小部件。

像这样：

Positioned()

Result on device

Answer 2

您可以将bottomAppBar中的按钮设置为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(),         
        )
      ),
    );
  }
}

将图像与屏幕中心对齐，按钮与屏幕底部对齐，但图像和按钮彼此相邻

2 个答案: