如何在Flutter中创建带静态搜索栏的持久化底部导航栏

完全可以实现这种布局，以下是具体的实现代码，你可以直接运行并根据需求调整样式：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '底部菜单带搜索栏示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const BottomNavWithSearch(),
    );
  }
}

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

  @override
  State<BottomNavWithSearch> createState() => _BottomNavWithSearchState();
}

class _BottomNavWithSearchState extends State<BottomNavWithSearch> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Demo页面')),
      body: Center(
        child: Text('当前选中第$_selectedIndex页'),
      ),
      // 自定义底部区域：搜索栏 + 导航菜单
      bottomNavigationBar: Container(
        color: Colors.white,
        child: Column(
          mainAxisSize: MainAxisSize.min, // 自适应高度，避免占满屏幕
          children: [
            // 静态搜索栏
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              child: TextField(
                enabled: false, // 设置为false实现纯静态不可交互的搜索栏
                decoration: InputDecoration(
                  hintText: '输入关键词搜索',
                  prefixIcon: const Icon(Icons.search, color: Colors.grey),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(24),
                    borderSide: BorderSide.none,
                  ),
                  filled: true,
                  fillColor: Colors.grey.shade200,
                  contentPadding: const EdgeInsets.symmetric(vertical: 12),
                ),
              ),
            ),
            // 底部导航菜单
            BottomNavigationBar(
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home_outlined),
                  activeIcon: Icon(Icons.home),
                  label: '首页',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.shopping_cart_outlined),
                  activeIcon: Icon(Icons.shopping_cart),
                  label: '购物车',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person_outline),
                  activeIcon: Icon(Icons.person),
                  label: '我的',
                ),
              ],
              currentIndex: _selectedIndex,
              selectedItemColor: Colors.blue,
              unselectedItemColor: Colors.grey,
              onTap: _onItemTapped,
              type: BottomNavigationBarType.fixed,
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 使用Column包裹搜索栏和BottomNavigationBar，设置mainAxisSize: MainAxisSize.min确保底部区域只占用必要高度
• 将TextField的enabled设为false即可实现纯静态不可交互的搜索栏，若需保留搜索功能可改为true
• 可根据需求调整搜索栏的圆角、背景色、图标样式，以及底部导航的图标、文字和选中颜色

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