image.png
Flutter TabBar 在設(shè)置【isScrollable: true】后存在左側(cè)邊距和底部黑線
TabBar(
tabs: [
Text("第一個(gè)"),
Text("第2個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
],
controller: _tabController,
isScrollable: true,
)
去除方法
dividerHeight: 0,
tabAlignment: TabAlignment.start,
例子代碼??
TabBar(
dividerHeight: 0,
tabAlignment: TabAlignment.start,
tabs: [
Text("第一個(gè)"),
Text("第2個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
Text("第一個(gè)"),
],
controller: _tabController,
isScrollable: true,
)
問題原因
image.png
左側(cè)邊距問題
TabBar源碼中 如果 tabAlignment 不設(shè)置嗤形，默認(rèn)是TabAlignment.startOffset飞崖，會(huì)使用【const double _kStartOffset = 52.0;】設(shè)置左側(cè)偏移量52钝诚。導(dǎo)致左側(cè)存在很大邊距
底側(cè)黑線問題
dividerHeight 和 dividerColor 可以設(shè)置線的高度和顏色泉蝌，高度改成0 或者 將顏色改成透明即可
