如何使 ElevatedButton 居中？

Question

我从 pub.dev 导入了 [向上滑动面板][2]，除了一个问题外，一切都很好。我正在寻找一种使 'blue circle' 垂直居中的方法。（在 'red appbar' 和 'buttom slider' 之间）我尝试用 'center' 包装代码或使用 mainaxisalignment 但它不起作用。我在 google 上发现的其他尝试只是给了我一个错误。请帮忙。提前致谢

return Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(200),
    child: AppBar(
      backgroundColor: Colors.pinkAccent,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(100))
      ),
      flexibleSpace: Container(
        alignment: Alignment.center,
        child: Text(
          'Red AppBar',
          style: TextStyle(
              color: Colors.white,
              fontSize: 50.0,
              fontWeight: FontWeight.bold
          ),
        ),
      ),
    ),
  ),
  body: SlidingUpPanel(
    renderPanelSheet: false,
    panel: _floatingPanel(),
    collapsed: _floatingCollapsed(),
    body: ElevatedButton(
      onPressed: () {},
      child: Text('Blue Circle'),
      style: ElevatedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(20),
      ),
    )
  ),
);

  Widget _floatingCollapsed() {
return Container(
  decoration: BoxDecoration(
    color: Colors.blueGrey,
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0)),
  ),
  margin: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
  child: Center(
    child: Text(
      "buttom slider",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

}

  Widget _floatingPanel() {
return Container(
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(24.0)),
      boxShadow: [
        BoxShadow(
          blurRadius: 20.0,
          color: Colors.grey,
        ),
      ]
  ),
  margin: const EdgeInsets.all(24.0),
  child: Center(
    child: Text("LEVEL INFO"),
  ),
);

}

此外，给 'blue circle' 留出余量的最佳方法是什么，这样它就不会触及屏幕的最左侧和最右侧？

Answer 1

SlidingUpPanel 的正文正在使用 Stack，也将全屏显示。您可以查看

@override
Widget build(BuildContext context) {
  return Stack(
    alignment: widget.slideDirection == SlideDirection.UP
        ? Alignment.bottomCenter
        : Alignment.topCenter,
    children: <Widget>[
      //make the back widget take up the entire back side
      widget.body != null
          ? AnimatedBuilder(
              animation: _ac,
              builder: (context, child) {
                return Positioned(
                  top: widget.parallaxEnabled ? _getParallax() : 0.0,
                  child: child ?? SizedBox(),
                );
              },
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: widget.body,
              ),
            )

您可以在 body 上玩 Align 并用 SizedBox 换行。您可以使用 LayoutBuilder 或 MediaQuery 来提供大小。

body: SlidingUpPanel(
    renderPanelSheet: false,
    panel: _floatingPanel(),
    collapsed: _floatingCollapsed(),
    body: Align(
      alignment: Alignment(0.0, -.3), //play with it
      child: SizedBox(
        width: 200,
        height: 200,
        child: ElevatedButton(

Answer 2

根据 sliding_up_panel 的文档，主体表示位于滑动面板下方的小部件，它会自动调整自身大小以填充屏幕。所以它占据了整个屏幕。由于您将 AppBar 扩展到 200 个单位，主体 Widget 被向下推，因此您看到中心点也被向下推了 200 个单位。如果您更改 body 高度以从一开始就占据全屏，通过将 Scaffold 属性 extendBodyBehindAppBar 设置为 true，您会将小部件放置在正确的中心点。

如果您在 Scaffold 之后立即添加以下行。你会得到想要的结果。

return Scaffold(
   extendBodyBehindAppBar:true,

如何使 ElevatedButton 居中？

How to center ElevatedButton in flutter?

flutter

flutter-layout