Навигация к подэкрану из BottomNavigationBar-sceeen во флаттере - PullRequest
Новая
       28

Навигация к подэкрану из BottomNavigationBar-sceeen во флаттере

0 голосов
/ 11 ноября 2019

В настоящее время я работаю над своим первым простым приложением-флаттером и пытаюсь выяснить наш лучший подход к навигации между экранами.

Уже возможно:

  • Навигация по экранам с помощью BottomNavigationBar + BottomNavigationBarItem
  • Навигация с помощью Navigator.push(context,MaterialPageRoute(builder: (context) => Screen4()),);

Проблема:

  • Наличие вспомогательных экранов на экранах BottomNavigationBar

Пример кода:

Я хочу иметь три основных экрана Screen1(), Screen2() и Screen3() доступны из BottomNavigationBar. В Screen1() есть кнопка для перехода на другой экран, назовем ее Screen4(), где пользователь может выбирать из списка элементов. Затем вы можете добавить все выбранные элементы в список и вернуться к Screen1().

. Для этого я создал код ниже. Основной Widget из body будет изменен в соответствии с текущим индексом выбранного BottomNavigationItem.

main.dart 


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyApp(),
    );
  }
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Screen1(),
    Screen2(),
    Screen3(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stackoverflow Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Screen1'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Screen2'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('Screen3'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

проблема заключается в том, что при переходе по Screen1() - виджету к Screen4() с использованием 

Navigator.push(context,MaterialPageRoute(builder: (context) => Screen4()),);

навигация происходит за пределами MyApp(), поэтому Scaffold.

Если у кого-то есть пример, где это достигается, я был бы очень счастлив. Спасибо за чтение.

1 Ответ

0 голосов
/ 11 ноября 2019

Я предлагаю вам запустить CupertinoApp вместо MaterialApp. Используйте CupertinoTabScaffold вместо Scaffold. Добавьте CupertinoTabBar как tabBar и верните CupertinoTabView как tabBuilder

пример tabBuilder 

  tabBuilder: (context, index) {
    if (index == 0) {
      return CupertinoTabView(
        navigatorKey: firstTabNavKey,
        builder: (BuildContext context) => Screen1(),

Вот хорошая статья для чтения: ссылка

...