英文:
How to make the tab in flutter?
问题
我想在Flutter中使用选项卡来制作这个设计。但是当我尝试使用选项卡控制器时，如果不选择另一个，则其背景应为灰色，我正在尝试但不起作用。所以，你可以在这方面帮助我吗？
英文:
I want to make this design using tab in flutter. But when I'm trying to make it using tab controller but when we not select another one then it's background should be grey I'm trying it but it is not working. So, you can help me in this.
答案1
得分: 1
请看官方的Flutter Cookbook，了解如何使用标签和标签控制器的最佳解释和示例。
https://docs.flutter.dev/cookbook/design/tabs
英文:
For the best explanation and example take a look at the official Flutter cookbook on how to work with tabs and tab controllers.
答案2
得分: 0
以下是您要翻译的代码部分：
使用此页面
类 HomePage 扩展 StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
类 _HomePageState 扩展 State<HomePage> with TickerProviderStateMixin {
late TabController controller;
@override
void initState() {
controller = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
),
body: Column(
children: [
TabBar(
controller: controller,
isScrollable: true,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
splashBorderRadius: BorderRadius.circular(50),
padding: const EdgeInsets.all(8),
labelStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
indicator: const BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.all(Radius.circular(50)),
),
tabs: const [
SizedBox(
width: 100,
child: Tab(
text: "Gainer",
),
),
SizedBox(
width: 100,
child: Tab(
text: "Loser",
),
),
],
),
Expanded(
child: TabBarView(
controller: controller,
children: const [
Center(
child: Text("Gainer"),
),
Center(
child: Text("Loser"),
),
],
),
),
],
));
}
}
希望这对您有所帮助。如果您需要任何进一步的帮助，请随时告诉我。
英文:
Use this Page
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin{
late TabController controller;
@override
void initState() {
controller = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
),
body: Column(
children: [
TabBar(
controller: controller,
isScrollable: true,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
splashBorderRadius: BorderRadius.circular(50),
padding: const EdgeInsets.all(8),
labelStyle: const TextStyle(fontSize: 16,fontWeight: FontWeight.bold),
indicator: const BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.all(Radius.circular(50)),
),
tabs: const [
SizedBox(
width: 100,
child: Tab(
text: "Gainer",
),
),
SizedBox(
width: 100,
child: Tab(
text: "Loser",
),
),
],
),
Expanded(
child: TabBarView(
controller: controller,
children: const[
Center(
child: Text("Gainer"),
),
Center(
child: Text("Loser"),
),
],
),
),
],
));
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论