Многоразовый компонент флаттера (нижний колонтитул) - PullRequest
Новая
       0

Многоразовый компонент флаттера (нижний колонтитул)

0 голосов
/ 20 июня 2020

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

import 'package:flutter/material.dart';

class FooterMenu extends StatefulWidget {
  final List<Map<String, dynamic>> menuItemsMap;
  List<BottomNavigationBarItem> navItems = [];

  FooterMenu({Key key, @required this.menuItemsMap}) : super(key: key) {
    this.buildNavItems();
  }

  void buildNavItems() {
    menuItemsMap.forEach((element) {
      navItems.add(BottomNavigationBarItem(
        icon: element['icon'],
        title: Text(element['text']),
      ));
    });
  }


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

class _FooterMenuState extends State<FooterMenu> {
  int _selectedIndex = 0;

  _FooterMenuState(); //constructor

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: widget.navItems,
        currentIndex: _selectedIndex,
        // selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Как мне теперь включить его на страницу, которая уже определен метод build? Возможно ли это вообще?

1 Ответ

2 голосов
/ 20 июня 2020

Что вы имеете в виду под уже определенным методом сборки? Если вы имеете в виду, как вы можете включить этот пользовательский BottomNavigationBar, который вы создали сами, внутри другой страницы с помощью шаблона, просто верните BottomNavigationBar, а не Scaffold с ним, это так же просто, как просто сделать это: 

class _FooterMenuState extends State<FooterMenu> {
  int _selectedIndex = 0;

  _FooterMenuState(); //constructor

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

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        items: widget.navItems,
        currentIndex: _selectedIndex,
        // selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
    );
  }
}



// Some Other class that you want to include your FooterMenu in
Widget build(BuildContext context) {
  return Scaffold(
    //other widgets
    bottomNavigationBar: FooterMenu(<Your argument menu items>),
  );
}
...