如何对齐选项卡栏中的选项卡

问题描述 投票:0回答:1

我需要像这样对齐标签栏中的选项卡:在此处输入图像描述 左边缘的第一个元素 第二个在中心 右边缘第三个

但我可以像这样对齐在此处输入图像描述 这是我的代码

 Expanded(
                  child: DefaultTabController(
                    length: 3,
                    child: Column(
                      children: [
                        TabBar(
                          tabs:  [
                            Tab(text: AppLocalizations.of(context)!.products, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/products.svg'),),
                            Tab(text: AppLocalizations.of(context)!.posts, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/posts.svg'),),
                            Tab(text: AppLocalizations.of(context)!.looks, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/looks.svg'),),
                          ],
                          tabAlignment: TabAlignment.fill,
                          labelColor: CasaColors.textSearchGrey,
                          labelStyle: const TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 12
                          ),
                          indicatorColor: CasaColors.textSearchGrey,
                          indicatorSize: TabBarIndicatorSize.tab,
                          indicatorWeight: 1,
                          //indicator: DotIndicator(),
                          dividerHeight: 0,
                          splashFactory: NoSplash.splashFactory,
                          overlayColor: MaterialStateProperty.resolveWith<Color?>(
                                  (Set<MaterialState> states) {
                                return states.contains(MaterialState.focused) ? null : Colors.transparent;
                              }
                          ),
                        ),
                        const SizedBox(height: 5,),
                        const Expanded(
                            child: TabBarView(
                              children: [
                                ProductsSaved(),
                                ProductsSaved(),
                                ProductsSaved(),

                              ],
                            ))
                      ],
                    ),
                  )
              ),
flutter dart user-interface uitabbar
1个回答
0
投票

像这样包裹起始选项卡:

Align(alignment: Alignment.centerLeft,child: Tab(text: AppLocalizations.of(context)!.products, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/products.svg'),),)

和结束标签如:

Align(alignment: Alignment.centerRight,child: Tab(text: AppLocalizations.of(context)!.looks, icon: SvgPicture.asset('assets/svg_icons/saved_tab_icons/looks.svg'),),)
© www.soinside.com 2019 - 2024. All rights reserved.