Question

我想将按钮对准屏幕的底部中心

我在脚手架上创建了一个buttomappbar，我想添加一个圆形按钮，但我不想使用默认的fab。我使用了另一个圆形按钮，但我尝试使用“对齐”小部件将按钮与buttomcenter对齐，但该按钮仍居中。

class _MainActivityState extends State<MainActivity> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        backgroundColor: HexColor("ECEDEF"),



        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Icon(Icons.threed_rotation)
            ],
          ),
          shape: CircularNotchedRectangle(),
          color: Colors.white,
        ),
        body: Container(
          height: MediaQuery.of(context).size.height,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: CircularGradientButton(
              child: Icon(Icons.gradient),
              callback: (){},
              gradient: Gradients.rainbowBlue,
              shadowColor: Gradients.rainbowBlue.colors.last.withOpacity(0.5),
            ),
          )
        )
    );
  }
}

我希望CircularGradientButton到达BottomAppBar上方的底部中心

Answer 1

通过堆栈可以实现这一目标。将fit属性设置为：StackFit.expand，然后使用bottom:0和width: MediaQuery.of(context).size.width的位置。

return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Positioned(
            bottom: 0,
            width: MediaQuery.of(context).size.width,
            child: Center(
              child: MaterialButton(
                onPressed: () {},
                color: Colors.red,
              ),
            ),
          )
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[Icon(Icons.threed_rotation)],
        ),
        shape: CircularNotchedRectangle(),
        color: Colors.white,
      ),
    );

将按钮对准底部中心

1 个答案: