如何制作不依赖Scaffold的自定义BottomNavigationBar底部固定组件

你可以通过两种常用方式实现这个需求，无需依赖Scaffold：

方式一：使用Stack + Positioned定位 #

利用Stack的堆叠特性，将Form作为底层内容，用Positioned把导航组件精准固定在屏幕底部。同时给Form添加滚动组件和底部内边距，避免长表单内容被遮挡。

Stack(
  children: [
    // 表单区域
    Form(
      child: SingleChildScrollView(
        // 给底部导航预留高度，防止内容被遮挡
        padding: const EdgeInsets.only(bottom: 60),
        child: Column(
          children: const [
            TextFormField(decoration: InputDecoration(labelText: '用户名')),
            TextFormField(decoration: InputDecoration(labelText: '密码')),
            // 更多表单输入项...
          ],
        ),
      ),
    ),
    // 固定在底部的导航组件
    Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: Container(
        height: 60,
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(icon: const Icon(Icons.home), onPressed: () {}),
            IconButton(icon: const Icon(Icons.search), onPressed: () {}),
            IconButton(icon: const Icon(Icons.person), onPressed: () {}),
          ],
        ),
      ),
    ),
  ],
)

方式二：使用Column + Expanded分配空间 #

通过Column布局，让Expanded包裹Form区域占据剩余垂直空间，底部导航组件自然落在屏幕底部。同样需要滚动组件处理长表单场景。

Column(
  children: [
    Expanded(
      child: SingleChildScrollView(
        child: Form(
          child: Column(
            children: const [
              TextFormField(decoration: InputDecoration(labelText: '用户名')),
              TextFormField(decoration: InputDecoration(labelText: '密码')),
              // 更多表单输入项...
            ],
          ),
        ),
      ),
    ),
    // 底部导航组件
    Container(
      height: 60,
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconButton(icon: const Icon(Icons.home), onPressed: () {}),
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          IconButton(icon: const Icon(Icons.person), onPressed: () {}),
        ],
      ),
    ),
  ],
)

额外优化：适配系统安全区域 #

如果需要适配iOS底部安全区域或安卓导航栏，可将底部导航组件用SafeArea包裹：

// 以Stack方式为例
Positioned(
  left: 0,
  right: 0,
  bottom: 0,
  child: SafeArea(
    child: Container(
      // 底部导航内容
    ),
  ),
)

内容的提问来源于stack exchange，提问作者황희윤