Хобрук: Ваш путь к мастерству в программировании

Показать страницу с определенным списком с сохранением нижней панели приложений - Flutter

Я создаю приложение с нижней панелью приложений с классическими проиндексированными страницами для навигации по главному меню:



class OverAllScreen extends StatefulWidget {
final int initialPage;
OverAllScreen(this.initialPage);
@override
_OverAllScreenState createState() => _OverAllScreenState();
}

class _OverAllScreenState extends State<OverAllScreen> {
List _pageOptions = [
  Shop(),
  Home(),
  Discover(),
  Account(),
];

int _page;

@override
void initState() {
  super.initState();
  setState(() {
    _page = widget.initialPage;
  });
}

@override
Widget build(BuildContext context) {
  final _theme = Theme.of(context);
  final _mediaSize = MediaQuery.of(context).size;

  return Scaffold(
    body: _pageOptions[_page],
    bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      backgroundColor: _theme.primaryColor,
      selectedItemColor: _theme.accentColor,
      unselectedItemColor: Colors.white,
      currentIndex: _page,
      onTap: (index) {
        setState(() {
          _page = index;
        });
      },
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Shop'),
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Discover'),
        BottomNavigationBarItem(
            icon: Icon(Icons.person_outline), label: 'Account'),
      ],
    ),
  );
}
} 


На странице учетной записи, ниже по дереву виджетов, у меня есть виджет, который показывает список подробных продуктов. Я хочу, чтобы эта страница открывалась, когда я нажимаю на элемент простой (не детализированной) сетки продуктов. Это легко сделать с помощью Navigator.of (context) .push (MaterialPageR0ute (...))). Однако я хотел бы, чтобы нижнийAppBAr оставался видимым (например, Instagram, когда вы смотрите на продукты пользователя). Проблема в том, что у меня есть конкретный список продуктов внизу в дереве виджетов, поэтому я не могу передать их в качестве аргумента на уровне страницы событий, не передавая их на каждом этапе пути, передав функцию в качестве аргумента. виджета.


class ProductList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _products = Provider.of<List<ProductModel>>(context);

    return ListView.builder(
      itemExtent: 150,
      scrollDirection: Axis.horizontal,
      itemCount: _products.length,
      itemBuilder: (context, index) => Card(
        margin: const EdgeInsets.all(5),
        child: InkWell(
          child: ProductTile(_products[index]),
          onTap: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => ProductDetailList(
                productIndex: index,
                products: _products,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Здесь я использую MaterialPageRoute, но хотел бы, чтобы BottomAppBar оставался видимым.

Спасибо.


Ответы:


1

Чтобы достичь нужной функциональности, вам придется написать несколько случаев переключения и прерывания, что может быть обременительным, поскольку ваше использование будет очень простым.

Я бы посоветовал использовать этот пакет.

Этот пакет предоставляет постоянную нижнюю панель навигации, которая легко настраивается, и вы даже можете использовать лосось, как нижнюю панель, без написания ни одной строки дополнительного кода.

25.11.2020
  • большое спасибо!! 01.12.2020
  • Новые материалы

    Решения DBA Metrix
    DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..

    Начало работы с Блум
    Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..

    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...