flutter TabBar 下劃線樣式

Widget?_tabBar()?{

????return?TabBar(

??????controller:?_tabController,

??????tabs:?tabs.map((e)?=>?_tab(e)).toList(),

??????labelPadding:?EdgeInsets.zero,

??????isScrollable:?true,

??????unselectedLabelColor:?ColorStyle.swordsColor,?

??????unselectedLabelStyle:?TextStyle(fontWeight:?FontWeight.w400),?

??????labelColor:?ColorStyle.titleColor,

??????labelStyle:?TextStyle(fontWeight:?FontWeight.bold),

??????//?indicator:?BoxDecoration(),

??????indicatorColor:?ColorStyle.appColor,?// 下劃線顏色

??????indicatorWeight:?2,?// 下劃線大小

??????indicatorPadding:?EdgeInsets.symmetric(horizontal:?23),? // 可以根據(jù)每個tab的寬度設(shè)置padding來調(diào)整下劃線的寬度

????);

??}



下劃線默認(rèn)是和tab寬度一樣寬的,想要減少他的寬度,可以設(shè)置?indicatorPadding屬性,比如tab寬100,設(shè)計圖上下劃線寬20,可以設(shè)置indicatorPadding為? (100-20)/2,也就是40? EdgeInsets.symmetric(horizontal:?40)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容