英文:
how to change background of individual Tab in flutter
问题
如何在Flutter中更改单个标签的背景，类似于以下示例：
在Flutter中更改单个标签的背景颜色
TabBar(
isScrollable: true,
unselectedLabelStyle: TextStyle(color: Colors.black),
unselectedLabelColor: Colors.black,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.black,
),
tabs: [
Tab(
child: Container(
color: Color(0xffebe7e2),
child: Text(
"All",
textAlign: TextAlign.center,
),
),
),
],
)
英文:
how to change background of individual Tab in flutter like This
change backgrounds colour of individual tab in flutter
TabBar(
isScrollable: true,
unselectedLabelStyle: TextStyle(color: Colors.black),
unselectedLabelColor: Colors.black,
indicator:BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.black),
tabs: [
Tab(
child: Container(
color: Color(0xffebe7e2),
child: Text(
"All",
textAlign: TextAlign.center,
),
),
),
],
),
答案1
得分: 0
你可以在Container的装饰中设置选项卡项的外观，代码如下：
class FA extends StatefulWidget {
const FA({super.key});
@override
State<FA> createState() => _FAState();
}
class _FAState extends State<FA> with SingleTickerProviderStateMixin {
late final controller = TabController(length: 3, vsync: this)
..addListener(() {
setState(() {});
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: TabBar(
controller: controller,
isScrollable: true,
unselectedLabelStyle: TextStyle(color: Colors.black),
unselectedLabelColor: Colors.transparent,
indicator: BoxDecoration(),
indicatorPadding: EdgeInsets.zero,
// splashBorderRadius: ,
tabs: [
Tab(
iconMargin: EdgeInsets.zero,
child: Container(
decoration: BoxDecoration(
color: controller.index == 0
? Colors.black
: Color.fromARGB(255, 164, 164, 164),
borderRadius: BorderRadius.circular(16)),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Text(
"All",
textAlign: TextAlign.center,
style: TextStyle(
color: controller.index == 0 ? Colors white : Colors.black,
),
),
),
),
Tab(
iconMargin: EdgeInsets.zero,
child: Container(
decoration: BoxDecoration(
color: controller.index == 1
? Colors black
: Color.fromARGB(255, 164, 164, 164),
borderRadius: BorderRadius.circular(16)),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Text(
"Next btn",
textAlign: TextAlign center,
style: TextStyle(
color: controller.index == 1 ? Colors.white : Colors.black,
),
),
),
),
],
),
);
}
}
英文:
You can provide tab item look on Container decoration like
class FA extends StatefulWidget {
const FA({super.key});
@override
State<FA> createState() => _FAState();
}
class _FAState extends State<FA> with SingleTickerProviderStateMixin {
late final controller = TabController(length: 3, vsync: this)
..addListener(() {
setState(() {});
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: TabBar(
controller: controller,
isScrollable: true,
unselectedLabelStyle: TextStyle(color: Colors.black),
unselectedLabelColor: Colors.transparent,
indicator: BoxDecoration(),
indicatorPadding: EdgeInsets.zero,
// splashBorderRadius: ,
tabs: [
Tab(
iconMargin: EdgeInsets.zero,
child: Container(
decoration: BoxDecoration(
color: controller.index == 0
? Colors.black
: Color.fromARGB(255, 164, 164, 164),
borderRadius: BorderRadius.circular(16)),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Text(
"All",
textAlign: TextAlign.center,
style: TextStyle(
color: controller.index == 0 ? Colors.white : Colors.black,
),
),
),
),
Tab(
iconMargin: EdgeInsets.zero,
child: Container(
decoration: BoxDecoration(
color: controller.index == 1
? Colors.black
: Color.fromARGB(255, 164, 164, 164),
borderRadius: BorderRadius.circular(16)),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Text(
"Next btn",
textAlign: TextAlign.center,
style: TextStyle(
color: controller.index == 1 ? Colors.white : Colors.black,
),
),
),
),
],
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论