Блог

Я получил требование о том, что ему нужна расширяемая панель вкладок, например, расширяемая в Flutter, когда есть более 5 вкладок. (5 вкладок отображаются на панели вкладок, и все вкладки отображаются в развернутом списке.)

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

Но здесь возникает вопрос. Две из этих вкладок скрыты, но пространство и контроллер по-прежнему работают с 7 вкладками. Когда я выберу вкладку 7, анимация контроллера перейдет в положение, в котором должна отображаться вкладка 7.

Я думаю, может быть, я могу просто использовать ListView для создания панели вкладок и заставить ее работать как панель вкладок origin, так что в качестве панели вкладок. Но этот способ сильно изменит файлы проекта, поэтому я считаю, что есть правильный(или простой) способ сделать это.

 Container(
          alignment: Alignment.topCenter,
          child: SizedBox(
            width: tabBarWidth! ? null : 315.w,
            height: toolbarHeight,
            child: Scaffold(
              backgroundColor: Colors.transparent,
              resizeToAvoidBottomInset: false,
              appBar: AppBar(
                elevation: 0,
                toolbarHeight: toolbarHeight,
                backgroundColor: Colors.transparent,
                automaticallyImplyLeading: false,
                flexibleSpace: SafeArea(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Expanded(
                        child: TabBar(
                          labelPadding: EdgeInsets.all(0),
                          indicatorPadding: indicatorLengthNormal!
                              ? EdgeInsets.zero
                              : EdgeInsets.only(left: 8.0, right: 8.0),
                          indicator: CustomUnderlineTabIndicator(
                            borderSide: BorderSide(
                              color: widget.indicatorColor == null
                                  ? AppColor.main_color!
                                  : widget.indicatorColor!,
                              width: indicatorWeight!,
                            ),
                            lineStroke: strokeStyle!,
                          ),
                          labelColor: widget.labelColor == null
                              ? AppColor.main_color
                              : widget.labelColor,
                          labelStyle: TextStyle(
                            fontSize: 12.sp,
                            fontWeight: FontWeight.bold,
                            fontFamily: 'MicrosoftYaHei',
                            color: widget.labelColor == null
                                ? AppColor.main_color
                                : widget.labelColor,
                          ),
                          unselectedLabelColor:
                              widget.unselectedLabelColor == null
                                  ? AppColor.main_text_color
                                  : widget.unselectedLabelColor,
                          unselectedLabelStyle: TextStyle(
                            fontSize: 12.sp,
                            fontWeight: FontWeight.bold,
                            fontFamily: 'MicrosoftYaHei',
                            color: widget.unselectedLabelColor == null
                                ? AppColor.main_text_color
                                : widget.unselectedLabelColor,
                          ),
                          tabs: [
                            for (int i = 0; i < widget.tabBarList.length; i  )
                              widget.isNeedTranslate!
                                  ? Offstage(offstage:i > 4 amp;amp; widget.isPromoPage!, child:Tab(text: Translations.of(context)!.text(widget.tabBarList[i])))
                                  : Offstage(offstage:i > 4 amp;amp; widget.isPromoPage!, child:Tab(text: widget.tabBarList[i]))
                          ],
                          controller: widget.tabController,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        )