dart 如何使用自定义起始位置将`TabBar`向左对齐

owfi6suc  于 12个月前  发布在  其他
关注(0)|答案(8)|浏览(211)

我目前正在开发一个Flutter应用程序,我想在其中显示从左侧开始的TabBar。如果AppBar有一个前导属性,我想将TabBar的起始位置改为与之匹配。然后在滚动中,它仍然会通过而不会离开白色区域。
这是我目前在AppBar中间显示TabBar的代码:

AppBar(
  bottom: TabBar(
    isScrollable: true,
    tabs: state.sortedStreets.keys.map(
      (String key) => Tab(
        text: key.toUpperCase(),
      ),
    ).toList(),
  ),
);

字符串

ht4b089n

ht4b089n1#

当TabBar的scrollable属性设置为false时,Flutter TabBar小部件会均匀地分隔制表符,如tabs.dart源代码中的注解所示:

// Add the tap handler to each tab. If the tab bar is not scrollable
// then give all of the tabs equal flexibility so that they each occupy
// the same share of the tab bar's overall width.

字符串
因此,您可以通过使用以下命令获得左对齐的TabBar:

isScrollable: true,


如果你想使用与Tab标签宽度相同的指示符(例如,如果你设置indicatorSize: TabBarIndicatorSize.label),那么你也可以像这样设置一个自定义指示符:

TabBar(
  indicator: UnderlineTabIndicator(
  borderSide: BorderSide(
    width: 4,
    color: Color(0xFF646464),
  ),
  insets: EdgeInsets.only(
    left: 0,
    right: 8,
    bottom: 4)),
  isScrollable: true,
  labelPadding: EdgeInsets.only(left: 0, right: 0),
  tabs: _tabs
    .map((label) => Padding(
      padding:
        const EdgeInsets.only(right: 8),
      child: Tab(text: "$label"),
   ))
   .toList(),
)


这将是什么样子的例子:


的数据

k2arahey

k2arahey2#

您可以使用AlignWidget将TabBar的标签页向左对齐,这将成为AdverredSize的子项。
这对我很有效:

bottom: PreferredSize(
    preferredSize: Size.fromHeight(40),
    ///Note: Here I assigned 40 according to me. You can adjust this size acoording to your purpose.
    child: Align(
      alignment: Alignment.centerLeft,
      child: TabBar(
        isScrollable: true,
        tabs: state.sortedStreets.keys.map(
          (String key) => Tab(
              text: key.toUpperCase(),
          ),
        ).toList(),
      ),
    ),
  ),

字符串
如果您只需要在body中使用TabBar,则可以删除TabredSizeWidget。

vof42yt1

vof42yt13#

也许你的TabBar没有填满整个水平区域。如果你把TabBar Package 在另一个扩展了整个宽度的Container中会发生什么?

Container(
  width: double.infinity
  child: TabBar(
    ...
    ...
  )
)

字符串

nbnkbykc

nbnkbykc4#

默认情况下,使用常量kToolbarHeight将选项卡栏与相同的标题栏高度对齐

bottom: PreferredSize(
  preferredSize: const Size.fromHeight(kToolbarHeight),
  child: Align(
  alignment: Alignment.centerLeft,
  child: TabBar(/*your code*/),
 ),
),

字符串

zphenhs4

zphenhs45#

对齐标签栏的完美解决方案在这里:

bottom: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: Align(
              alignment: Alignment.centerLeft,
              child: TabBar(

                indicatorSize: TabBarIndicatorSize.tab,
                indicatorColor: AppColors.cyan_blue,
                labelColor: AppColors.cyan_blue,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 4.0,
                      color: AppColors.cyan_blue,
                    ),
                insets: EdgeInsets.only(left: 10, right: 110.0)),
                labelStyle: TextStyle(fontSize: 16.0),
                //For Selected tab
                unselectedLabelStyle: TextStyle(fontSize: 12.0),
                isScrollable: true,
                labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
                tabs: [
                  Container(
                    child: Tab(
                      text: "Profile Summary\t\t\t",
                    ),
                  ),
                  Container(
                    child: Tab(
                      text: "Business summary",
                    ),
                  ),

                ],
              ),
            ),
          ),

字符串

vybvopom

vybvopom6#

这只是解决问题

isScrollable: true,
tabAlignment: TabAlignment.start

字符串

lsmd5eda

lsmd5eda7#

这将帮助您kToolbarHeightAlignment.centerLeft

bottom: PreferredSize(
          preferredSize: const Size.fromHeight(kToolbarHeight),
          child: Align(
            alignment: Alignment.centerLeft,
            //alignment: AlignmentDirectional.centerStart
            child: TabBar(
              isScrollable: true,
              indicatorColor: Colors.white,
              tabs: _tabs,
              controller: _tabController,
            ),
          ),
        ),

字符串

bq8i3lrv

bq8i3lrv8#

要对齐制表符位置,请使用Tabbar的tabAlignment属性,
tabAlignment: TabAlignment.start,
上面的代码将从左开始定位所有标签

相关问题