Флаттер вложенных вкладок - PullRequest
0 голосов
/ 12 апреля 2020

enter image description here

Здравствуйте, я пытаюсь сделать два динамических c слоя вкладок, как на картинке выше, но я застрял на втором слое, где находится подкатегория родительская вкладка. У кого-нибудь есть идеи, как сделать это динамически? ps: в приведенном выше примере изображения, когда вы нажимаете на вкладку подкатегории, она прокручивает вниз по указанному разделу c страницы и показывает связанные категории. Так что я имею в виду, что вкладка родительской категории разделена по вертикали на разные разделы, когда вы прокручиваете страницу вниз, вкладки подкатегории меняются в зависимости от раздела.

Вот мой код Вкладки первого слоя

DefaultTabController(
            length: _con.categories.length,
            child: Scaffold(
            key: _con.scaffoldKey,
            appBar: AppBar(
            bottom: TabBar(
                  onTap: (int index) {
                    _con.listenForProductsByCategory(
                        _con.categories.elementAt(index).id.toString(), null);
                  },
                  labelStyle: TextStyle(
                      fontSize: 20.0,
                      fontFamily: 'Family Name'), //For Selected tab
                  unselectedLabelStyle:
                      TextStyle(fontSize: 15.0, fontFamily: 'Family Name'),
                  indicatorWeight: 6.0,
                  indicatorSize: TabBarIndicatorSize.tab,
                  isScrollable: true,
                  indicatorColor: Colors.white,
                  tabs: List.generate(_con.categories.length, (index) {
                    return Tab(
                        text: _con.categories.elementAt(index).name ?? '');
                  }),
                  labelColor: Theme.of(context).primaryColor,
                ),),),),

  child: TabBarView(
                  physics: NeverScrollableScrollPhysics(),
                  children: List.generate(_con.categories.length, (index) {
                    return SingleChildScrollView(
                      padding:
                          EdgeInsets.symmetric(horizontal: 20, vertical: 25),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          SizedBox(height: 15),
                          GridView.count(
                            scrollDirection: Axis.vertical,
                            shrinkWrap: true,
                            primary: false,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 20,
                            padding: EdgeInsets.symmetric(horizontal: 0),
                            // Create a grid with 2 columns. If you change the scrollDirection to
                            // horizontal, this produces 2 rows.
                            crossAxisCount:
                                MediaQuery.of(context).orientation ==
                                        Orientation.portrait
                                    ? 3
                                    : 3,
                            // Generate 100 widgets that display their index in the List.
                            children: List.generate(_con.products.length + 1,
                                (index) {
                              if (index == _con.products.length) {
                                return _con.isLoadingProducts == true
                                    ? CupertinoActivityIndicator()
                                    : Container();
                              }
                              return ProductGridItemWidget(
                                  heroTag: 'favorites_grid',
                                  product: _con.products.elementAt(index),
                                  onPressed: () {
                                    {
                                      _con.addToCart(
                                          _con.products.elementAt(index));
                                    }
                                  });
                            }),
                          )
                        ],
                      ),
                    );
                  }),
                ),
...