如何将`TabBar`向左与自定义起始位置对齐
如何将`TabBar`向左与自定义起始位置对齐
提问于 2019-04-06 13:55:02
我目前正在开发一个Flutter应用程序，我想从左边开始显示TabBar。如果一个AppBar有一个前导属性，我想缩进TabBar的起始位置来匹配它。然后在滚动上，它仍然会通过，不会离开白色区域。
这是我的代码，它当前在AppBar中间显示一个TabBar
AppBar(
bottom: TabBar(
isScrollable: true,
tabs: state.sortedStreets.keys.map(
(String key) => Tab(
text: key.toUpperCase(),
),
).toList(),
),
);回答 5
Stack Overflow用户
发布于 2019-07-05 01:35:46
当TabBar的scrollable属性设置为false时，根据tabs.dart source code中的注释，Flutter TabBar小部件会均匀地将选项卡间隔开
// 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,如果您想要使用与选项卡标签宽度相同的指示器(例如，如果您设置了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(),
)示例如下所示：
Stack Overflow用户
发布于 2019-05-14 09:39:51
也许你的TabBar没有填满整个水平区域。如果将TabBar包装在扩展整个宽度的另一个容器中，会发生什么情况呢？
Container(
width: double.infinity
child: TabBar(
...
...
)
)Stack Overflow用户
发布于 2020-04-20 10:58:44
您可以使用 align 小部件将TabBar的选项卡左对齐，这将是PreferredSize的子项。
这对我很有效：
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(),
),
),
),如果您只需要在正文中使用TabBar，您可以删除PreferredSize小部件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55549762
复制
相似问题
假或真!=真或假!=真/假
基于R中的真/假矩阵的子集？
为什么假&(假)？假:真返回真。
如何(假==假==真)为真
(真!=假!=真)与(假!=真!=假)有什么区别？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
