如何解决颤振中的自定义标签栏选项卡 我想要的东西:我当前的代码:
我正在做一个项目,我需要这样的标签栏选项卡。我曾尝试使用选项卡-> 图标、文本,但它更小
我想要的东西:
我当前的代码:
List<Tab> getTabs(int count,AsyncSnapshot snapshot) {
_tabs.clear();
for (int i = 0; i < count; i++) {
categoriesmodel categ = snapshot.data[i];
_tabs.add(
getTab(
categ.categories_name.toString(),categ.icon_of_category.toString(),),);
}
return _tabs;
}
Tab getTab(String tabtitle,String imagepath) {
return Tab(
icon: Image.network(
imagepath,height: 40,width: 40,child: Text(
tabtitle,style: TextStyle(color: Colors.black),);}
应用栏内
bottom: PreferredSize(
preferredSize: Size(120,120),child: Container(
height: 120,color: Colors.white,child: TabBar(
isScrollable: true,indicatorColor: mainaccent,tabs: _tabs,controller: _tabController,
解决方法
这个例子可以帮助你:
DefaultTabController(
length: 3,child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,title: Text('Flutter is Awesome',style: TextStyle(color: Colors.black),),centerTitle: true,bottom: TabBar(
tabs: [
CircleAvatar(backgroundImage: AssetImage('assets/image1.png')),CircleAvatar(backgroundImage: AssetImage('assets/image2.png')),CircleAvatar(backgroundImage: AssetImage('assets/image3.png')),],body: TabBarView(children: [
Center(child: Text('First Tab')),Center(child: Text('Second Tab')),Center(child: Text('Third Tab'))
])
),);
输出:
理想情况下,不要忘记用 DefaultTabController
包裹您的 Scaffold。
您也可以像这样直接使用 TabBar 而不是 AppBar:appBar : TabBar()
。但请确保您有一个 SafeArea
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。