如何在Flutter中制作选项卡?

huangapple go评论70阅读模式
英文:

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.

如何在Flutter中制作选项卡?

答案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.

https://docs.flutter.dev/cookbook/design/tabs

答案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&lt;HomePage&gt; createState() =&gt; _HomePageState();
}

class _HomePageState extends State&lt;HomePage&gt; 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: &quot;Gainer&quot;,
                  ),
                ),
                SizedBox(
                  width: 100,
                  child: Tab(
                    text: &quot;Loser&quot;,
                  ),
                ),
              ],
            ),
            Expanded(
              child: TabBarView(
                controller: controller,
                children: const[
                  Center(
                    child: Text(&quot;Gainer&quot;),
                  ),
                  Center(
                    child: Text(&quot;Loser&quot;),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

如何在Flutter中制作选项卡?

huangapple
  • 本文由 发表于 2023年4月19日 18:33:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76053478.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定