Question

我正在尝试为应用程序实现ui / ux。我试图在卡片的主体内部制作一个标签栏，摘要如下所示。

我试图像上面那样制作三个标签栏。任何帮助将不胜感激。

Answer 1

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.white,
      elevation: 0,
      bottom: TabBar(
          unselectedLabelColor: Colors.redAccent,
          indicatorSize: TabBarIndicatorSize.label,
          indicator: BoxDecoration(
              borderRadius: BorderRadius.circular(50),
              color: Colors.redAccent),
          tabs: [
            Tab(
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    border: Border.all(color: Colors.redAccent, width: 1)),
                child: Align(
                  alignment: Alignment.center,
                  child: Text("Flow \nReport"),
                ),
              ),
            ),
            Tab(
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    border: Border.all(color: Colors.redAccent, width: 1)),
                child: Align(
                  alignment: Alignment.center,
                  child: Text("Consumption \n Report"),
                ),
              ),
            ),
            Tab(
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    border: Border.all(color: Colors.redAccent, width: 1)),
                child: Align(
                  alignment: Alignment.center,
                  child: Text("Automated \n Alert"),
                ),
              ),
            ),
          ]),
    ),
    body: TabBarView(children: [
      Icon(Icons.apps),
      Icon(Icons.movie),
      Icon(Icons.games),
    ]),
  )),

希望这会有所帮助，如果您想要更大的标签文本，则可以添加“灵活”。如果需要，可以删除图标。

Answer 2

您可以尝试使用DefaultTabController，并在需要的地方使用标签栏，如下所示：

  TabController _tabController;

  var tabIndex = 0;
  
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      initialIndex: tabIndex,
      child: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: [
               
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: dimensions.defaultPadding),
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(12.0),
                        border: Border.all(color: Colors.blue)
                    ),
                    child: TabBar(
                      controller: _tabController,
                        unselectedLabelColor: Colors.white,
                        indicator: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(12.0),
                            border: Border.all(color: Colors.blue)
                        ),
                        onTap: (index) {
                          setState(() {
                            tabIndex = index;
                          });
                        },
                        labelColor: Colors.blue,
                        tabs: <Widget>[
                          Tab(text: 'Flow Report'),
                          Tab(text: 'Comsuption Report'),
                          Tab(text: 'Automated Alert'),
                        ]
                    ),
                  ),
                ),
               
                Container(
                  
                    child: TabBarView(
                      controller: _tabController,
                      children: [
                        Content1(),
                        Content2(),
                        Content3(),
                      ],
                    ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

希望我能帮上忙

如何在卡片内添加标签栏？

2 个答案: