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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedPage = 2;
  final _pageOptions = const [
    PageOne(),
    PageTwo(),
    PageThree(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 拆分body为固定区域+动态切换区域
      body: Column(
        children: [
          // 这里是页面固定区域，可自定义为顶部标题栏、通用导航等
          const SizedBox(
            height: 60,
            child: Center(
              child: Text(
                '固定顶部区域',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
          ),
          // 动态切换的区域，用Expanded占据剩余屏幕空间
          Expanded(
            child: _pageOptions[selectedPage],
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: ""),
        ],
        currentIndex: selectedPage,
        onTap: (int index) {
          setState(() {
            selectedPage = index;
          });
        },
      ),
    );
  }
}

// 示例页面组件，可根据业务需求自定义
class PageOne extends StatelessWidget {
  const PageOne({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('页面一内容'));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('页面二内容'));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('页面三内容'));
  }
}

关键修改说明 #

• 将原有的body: _pageOptions[selectedPage]替换为Column布局，拆分出固定区域和动态切换区域
• 固定区域可根据需求自定义（如AppBar、搜索栏等），这部分不会随底部导航切换而变化
• 用Expanded包裹动态切换的页面组件，确保它自动填充剩余屏幕空间，点击底部导航时仅更新该区域
• 补充currentIndex: selectedPage，让底部导航栏的选中状态与当前页面同步

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