Блог

Главная - Вопросы по программированию - Flutter: Архитектура навигации с меню нижней панели

Flutter: Архитектура навигации с меню нижней панели

#flutter

#flutter

Вопрос:

Я все еще не до конца понимаю процесс сборки и навигации во Flutter, и мне было интересно, как спроектировать основную навигационную архитектуру более сложного приложения с большим количеством страниц.

В моем случае у меня есть домашняя страница с каркасом, нижней панелью для навигации и 5 элементами в ней.

 class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...),
      body: [Page1(), Page2(), Page3(), Page4(), Page5()].elementAt(_selectedIndex),
      bottomNavigationBar: BottomAppBar(
          child: Row(
            children: [
              IconButton(
                icon: Icon(
                  FeatherIcons.home,
                  size: 27,
                  color: (_selectedIndex == 0)
                      ? Colors.yellow[600]
                      : Colors.grey[800],
                ),
                onPressed: () {
                    setState(() {
                      _selectedIndex = 0;
                    });
                },
              ),
            // four more Icon Buttons ....
           ]
          ),
         ),
   );

и, например, на странице 2 () у меня есть две вкладки на странице, и я использовал шаблон:

 Scaffold(
   ...
   body: (_index = 0) ? TabPage1() : TabPage2(),
)

где у меня есть две кнопки значков AppBar.title для изменения индекса.

Являются ли эти плохие методы для навигации? Должен ли я использовать просмотр страниц для 5 основных страниц на главной странице или каков наилучший способ управления навигацией?

Комментарии:

1. Я бы посоветовал вам создать страницу для страницы 2 и использовать Flutter Tabbar flutter.dev/docs/cookbook/design/tabs Используя Flutter Tabbar, вам не нужно проверять **(_index = 0) ? TabPage1() : TabPage2(), ** и у вас может быть доступ к обеим вкладкам внутри вашей страницы 2

2. Для наглядности и удобства обслуживания рекомендуется использовать функции навигации, предоставляемые во Flutter. Я бы определенно предложил использовать PageView так же, как TabBar и в приведенном вами примере.

Метки: