Flutter BottomNavigationBar我应该使用Container和Align吗

有时预定义的小部件是有限的，比如BottomNavigationBar，但您使用的是Ffltter，因此您可以自定义和创建自己的小部件:d.

我为您创建了一个示例，我使用IndexedStack来控制视图页面，使用简单的Container和Stack来创建导航底栏(您可以在自己的小部件中提取它).

结果:

代码:

class MyNewPage extends StatefulWidget {
 const MyNewPage({super.key});

 @override
 State<MyNewPage> createState() => _MyNewPageState();
}

class _MyNewPageState extends State<MyNewPage> {
 int _currentPage = 0;
 final int _maxPages = 5;

 Widget _buildPage(String text) {
   return Center(
     child: Text(
       text,
       style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 60),
     ),
   );
 }

 Widget _buildTab(
   String text,
   int index, {
   bool isCenter = false,
 }) {
   return InkWell(
     onTap: () {
       setState(() {
         _currentPage = index;
       });
     },
     child: Column(
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         isCenter
             ? const Icon(
                 Icons.apartment,
                 size: 50,
               )
             : const Icon(Icons.home),
         Text(text),
       ],
     ),
   );
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: IndexedStack(
       index: _currentPage,
       children: List.generate(
         _maxPages,
         (index) => _buildPage('Page: $index'),
       ),
     ),
     bottomNavigationBar: SafeArea(
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 10),
         child: SizedBox(
           height: 100,
           child: Stack(
             children: [
               Align(
                 alignment: Alignment.bottomCenter,
                 child: Container(
                   height: 80,
                   decoration: const BoxDecoration(
                     borderRadius: BorderRadius.all(Radius.circular(20)),
                     border:
                         Border.fromBorderSide(BorderSide(color: Colors.grey)),
                   ),
                 ),
               ),
               Positioned.fill(
                 child: Padding(
                   padding: const EdgeInsets.only(bottom: 20),
                   child: Row(
                     crossAxisAlignment: CrossAxisAlignment.end,
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: List.generate(
                       _maxPages,
                       (index) => _buildTab(
                         'Home',
                         index,
                         isCenter: index == 2,
                       ),
                     ),
                   ),
                 ),
               ),
             ],
           ),
         ),
       ),
     ),
   );
 }
}