Question

我试图弄清楚如何在BottomNavigationBar的顶部添加一条非常细的黑线，以使其与其他内容的区别更加明显。 AirBnb将是一个很好的例子。

有没有办法用Flutter实现这一目标？

下面是我当前用于渲染BottomNavigationBar的小部件，我在下面附加了一个示例，该示例在导航栏的顶部为AirBnb提供了明显的灰线。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: currentPage,
    bottomNavigationBar: PreferredSize(
      preferredSize: Size.fromHeight(50),
      child: Container (
        decoration: BoxDecoration(
        border: Border.all(color: Colors.black)
        ),
      )
    ),
  );
}

此小部件的父级：

void main() => runApp(MaterialApp(
  home: new MyApp(),
  debugShowCheckedModeBanner: true,
));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Navbar();
  }
}

Answer 1

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(200),
        child: Container(
          alignment: Alignment.center,
          color: globals.white,
          height: 100,
          child: Text('imyadunandan'),
        ),
      ),
      body: Container(
        color: globals.white,
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: globals.white,
          boxShadow: [
            BoxShadow(
              color: globals.black,
            ),
          ],
        ),
        child: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.android),
              title: Text('Android'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.desktop_windows),
              title: Text('Windows'),
            ),
          ],
          backgroundColor: globals.white,
          elevation: 0,
        ),
      ),
    );
  }

此代码实现了休闲

Answer 2

如何在底部导航视图的顶部添加线条？

代码

class BottomNavigationBarHandler {
  Widget bar(int currentIndex) {
    return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(top: BorderSide(color: Colors.white, width: 3.0))),
        child: BottomNavigationBar(
            backgroundColor: Colors.black,
            selectedItemColor: Colors.pinkAccent,
            unselectedItemColor: Colors.white,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            onTap: onTabTapped,
            currentIndex: currentIndex,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home_outlined),
                title: Text('Home')),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                title: Text('Messages')),
              BottomNavigationBarItem(
                icon: Icon(Icons.add), 
                title: Text('Profile'))]));
  }

  void onTabTapped(int index) {
     print('BottomNavigationBarIndex ::' + index.toString());
  }
}

输出

Flutter在BottomNavigationBar的顶部添加黑色轮廓

2 个答案: