Flutter：同时使用 Align bottom 和 SingleChildScrollView？答案

【问题标题】：Flutter: Using Align bottom and SingleChildScrollView together?Flutter：同时使用 Align bottom 和 SingleChildScrollView？
【发布时间】：2021-05-23 13:02:34
【问题描述】：

我想为我的应用添加页脚文本。这在我使用 Align() 时效果很好，因此它会自动将文本放在屏幕底部。但是当我使用 SingleChildScrollView() 时，它会显示错误，因为屏幕不再是静态的。如何将两者结合起来，让页脚始终位于底部但保持屏幕（有点）可滚动？

【问题讨论】：

标签： flutter user-interface dart

【解决方案1】：

您可以尝试一些可以将该文本放入bottomNavigationBar 或bottomSheet 的方法...或者您可以尝试以这种方式对齐

alignment: FractionalOffset.bottomCenter,

或者您可以在该文本之前使用 spacer()。请记住，如果您使用它并且 singleChildScrollView 出现问题，这将对您有所帮助

CustomScrollView(
      slivers: [
        SliverFillRemaining(
          hasScrollBody: false,

只需使用它来代替 singleChildScrollView

【讨论】：

【解决方案2】：

您可以用Expanded() 小部件包装您的SingleChildScrollView()。

这是一个简单的例子

Container(
      child: Column(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Center(
              child: Text("Header"),
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
               // Put Content which will scroll
               child: Text("Hello"),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Center(
              child: Text("Footer"),
            ),
          )
        ],
      ),
    ),

【讨论】：

【解决方案3】：

您可以为此使用bottomNavigationBar，您可以在底部使用自定义小部件，在正文中使用SingleChildScrollView/CustomScrollView，您可以用于滚动或使用列表视图

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Demo"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
            ///Your Wiget
            ],
          ),
        ),
        bottomNavigationBar: TextButton(
          style: TextButton.styleFrom(
            primary: Colors.blue,
          ),
          onPressed: () {},
          child: Text('TextButton'),
        ));
  }
}

【讨论】：