用 Flutter 制作持久底部导航栏的最佳方法是什么？

Question

我需要一个带有 Flutter 的永久底部导航栏。我想用 5 个元素来做到这一点。同时，这 5 个元素中的 4 个将重定向到页面，1 个将重定向到 url。当 url 被访问并返回时，页面应该停留在上次访问的位置。我想以一种简单而好的方式做到这一点，你能帮忙吗？

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../../core/constants/app_assets.dart';
import '../../../blocs/navigation_bar/navigation_bar_bloc.dart';
import 'navigation_bar_item.dart';

class CustomNavigationBar extends StatelessWidget {
  const CustomNavigationBar({
    super.key,
    required this.currentIndex,
  });

  final int currentIndex;

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
      height: 70.h,
      labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
      selectedIndex: currentIndex,
      onDestinationSelected: (int index) {
        context
            .read<NavigationBarBloc>()
            .add(NavigationIndexChanged(index: index));
      },
      destinations: destinations,
    );
  }
}

const List<Widget> destinations = [
  BottomNavigationItem(item: AppAssets.bottomHome, label: 'Anasayfa'),
  BottomNavigationItem(item: AppAssets.bottomBaskan, label: 'Başkan'),
  SizedBox(width: 0, height: 0),
  BottomNavigationItem(item: AppAssets.bottomFabim, label: 'Fabim'),
  BottomNavigationItem(item: AppAssets.bottomFatih, label: 'Kütüphane'),
];

这样页面和网址重定向可以工作，但我无法使其永久化

Answer 1

在想要保持状态的页面上使用AutomaticKeepAliveClientMixin，试试这个：

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<NavigationBarBloc, int>(
        builder: (context, currentIndex) {
          return IndexedStack(
            index: currentIndex,
            children: const [
              Page1(),
              Page2(),
              SizedBox(), 
              Page3(),
              Page4(),
            ],
          );
        },
      ),
      bottomNavigationBar: BlocBuilder<NavigationBarBloc, int>(
        builder: (context, currentIndex) {
          return CustomNavigationBar(currentIndex: currentIndex);
        },
      ),
    );
  }
}

class CustomNavigationBar extends StatelessWidget {
  const CustomNavigationBar({
    super.key,
    required this.currentIndex,
  });

  final int currentIndex;

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
      height: 70.h,
      labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
      selectedIndex: currentIndex,
      onDestinationSelected: (int index) {
        context
            .read<NavigationBarBloc>()
            .add(NavigationIndexChanged(index: index));
      },
      destinations: destinations,
    );
  }
}

const List<NavigationDestination> destinations = [
  NavigationDestination(icon: Icon(Icons.home), label: 'Page 1'),
  NavigationDestination(icon: Icon(Icons.business), label: 'Page 2'),
  NavigationDestination(icon: Icon(Icons.school), label: 'Page 3'),
  NavigationDestination(icon: Icon(Icons.library_books), label: 'Page 4'),
];


class Page1 extends StatefulWidget {
  const Page1({Key? key}) : super(key: key);

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

class _Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 1'));
  }

  @override
  bool get wantKeepAlive => true;
}

class Page2 extends StatefulWidget {
  const Page2({Key? key}) : super(key: key);

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

class _Page2State extends State<Page2> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 2'));
  }

  @override
  bool get wantKeepAlive => true;
}

class Page3 extends StatefulWidget {
  const Page3({Key? key}) : super(key: key);

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

class _Page3State extends State<Page3> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 3'));
  }

  @override
  bool get wantKeepAlive => true;
}

class Page4 extends StatefulWidget {
  const Page4({Key? key}) : super(key: key);

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

class _Page4State extends State<Page4> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 4'));
  }

  @override
  bool get wantKeepAlive => true;
}