flutter - 如何在 flutter 应用程序中设置底部应用栏的边框半径？

Question

我想将borderRadius设置为底部导航应用程序栏，如图所示。我尝试将底部导航应用程序栏放入 ClipRRect borderRadius 和 Container 装饰中，但没有成功。那么如何将左上和右上边框半径应用到底部导航栏。请帮助让我知道我该怎么做？

main.dart

    void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Food Ordering',
      theme: ThemeData(primarySwatch: Colors.blue, primaryColor: Colors.white),
      home: MyStatefulWidget(),
      routes: <String, WidgetBuilder>{
        '/detail-page': (BuildContext context) => MyDetailPage(),
      },
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions = <Widget>[
    HomePage(),
    HomePage(),
    HomePage(),
    HomePage(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-home.png'),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-mentors.png'),
              title: Text('Mentors'),
            ),
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-messages.png'),
              title: Text('Messages'),
            ),
            BottomNavigationBarItem(
              icon: Image.asset('assets/icon-settings.png'),
              title: Text('Settings'),
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.blue,
          onTap: _onItemTapped),
    );
  }
}

Answer 1

编辑

Scaffold 现在有一个名为 extendBody 的属性，可用于将主体延伸到底部栏下方。从文档来看，

If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons.

这意味着您需要做的就是

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Some Text'),
      ),
      body: bodyContent,
      extendBody: true,
      bottomNavigationBar: bottomNavigationBar,
    );
  }

  Widget get bodyContent {
    return Container(color: Colors.red);
  }

  Widget get bottomNavigationBar {
    return ClipRRect(
      borderRadius: const BorderRadius.only(
        topRight: Radius.circular(40),
        topLeft: Radius.circular(40),
      ),
      child: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '1'),
          BottomNavigationBarItem(icon: Icon(Icons.usb), label: '2'),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind), label: '3'),
          BottomNavigationBarItem(
              icon: Icon(Icons.multiline_chart), label: '4'),
        ],
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.black,
        showUnselectedLabels: true,
      ),
    );
  }
}

已过时

将其放入堆栈中。不要直接将底部导航栏添加到脚手架。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Some Text'),
      ),
      body: Stack(
        children: <Widget>[
          bodyContent,
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: bottomNavigationBar,
          ),
        ],
      ),
    );
  }

  Widget get bodyContent {
    return Container(color: Colors.red);
  }

  Widget get bottomNavigationBar {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topRight: Radius.circular(40),
        topLeft: Radius.circular(40),
      ),
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('1')),
          BottomNavigationBarItem(icon: Icon(Icons.usb), title: Text('2')),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind), title: Text('3')),
          BottomNavigationBarItem(
              icon: Icon(Icons.multiline_chart), title: Text('4')),
        ],
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.black,
        showUnselectedLabels: true,
      ),
    );
  }
}