Flutter中如何将salomon_bottom_bar导航栏从底部移动到屏幕顶部

SalomonBottomBar本身是无位置限制的普通Widget，你之前将它赋值给Scaffold的bottomNavigationBar属性所以才会固定在底部，要移动到顶部只需要调整它在组件树中的位置即可，以下是两种常用实现方案：

方案1：放置在AppBar的bottom区域 #

适合需要保留AppBar相关特性的场景，借助AppBar自带的顶部定位能力实现：

Scaffold(
  // 不需要AppBar顶部标题栏的话可以把toolbarHeight设为0隐藏
  appBar: AppBar(
    toolbarHeight: 0,
    elevation: 0,
    backgroundColor: Colors.transparent,
    // 用PreferredSize包裹指定导航栏高度
    bottom: PreferredSize(
      preferredSize: const Size.fromHeight(60),
      child: SalomonBottomBar(
        currentIndex: _currentIndex,
        onTap: (i) => setState(() => _currentIndex = i),
        items: [
          SalomonBottomBarItem(icon: Icon(Icons.home), title: Text("Home"), selectedColor: Colors.pink, unselectedColor: Colors.white),
          SalomonBottomBarItem(icon: Icon(Icons.add), title: Text("Alarm"), selectedColor: Colors.yellow, unselectedColor: Colors.white),
          SalomonBottomBarItem(icon: Icon(Icons.timer), title: Text("Stopwatch"), selectedColor: Colors.orange, unselectedColor: Colors.white),
          SalomonBottomBarItem(icon: Icon(Icons.watch), title: Text("Timer"), selectedColor: Colors.cyan, unselectedColor: Colors.white)
        ],
      ),
    ),
  ),
  // 不要再给bottomNavigationBar属性赋值SalomonBottomBar
  body: [/* 你的四个页面对应的组件 */][_currentIndex],
)

方案2：放置在Body的Column顶部 #

适合不需要AppBar、要完全自定义导航样式的场景：

Scaffold(
  body: Column(
    children: [
      // 顶部优先放置导航栏，需要避开状态栏的话可以再包一层SafeArea
      SalomonBottomBar(
        currentIndex: _currentIndex,
        onTap: (i) => setState(() => _currentIndex = i),
        items: [
          SalomonBottomBarItem(icon: Icon(Icons.home), title: Text("Home"), selectedColor: Colors.pink, unselectedColor: Colors.white),
          SalomonBottomBarItem(icon: Icon(Icons.add), title: Text("Alarm"), selectedColor: Colors.yellow, unselectedColor: Colors.white),
          SalomonBottomBarItem(icon: Icon(Icons.timer), title: Text("Stopwatch"), selectedColor: Colors.orange, unselectedColor: Colors.white),
          SalomonBottomBarItem(icon: Icon(Icons.watch), title: Text("Timer"), selectedColor: Colors.cyan, unselectedColor: Colors.white)
        ],
      ),
      // 用Expanded撑满剩余高度放页面内容
      Expanded(
        child: [/* 你的四个页面对应的组件 */][_currentIndex],
      )
    ],
  ),
)

注意事项 #

• 调整位置后不要保留原bottomNavigationBar的赋值，否则会同时出现上下两个导航栏
• 可以自行修改SalomonBottomBar的margin、padding属性适配顶部显示的样式需求
• 要是出现导航栏被手机状态栏遮挡的情况，在导航栏外层包裹SafeArea组件即可自动适配

内容的提问来源于stack exchange，提问作者Skrrubs