Flutter 标签栏视图

Question

我对 Flutter 比较陌生，一直卡在标签栏问题上。

我在 pop-up 容器上创建了这个标签栏。我希望标签栏本身保留在原位，内容在其下方滚动。但是，在我当前的版本中，整个部分（包括选项卡栏选项）被推到上面的文本容器下方。

我怎样才能解决这个问题？我查看了 SliverAppBars，但我不需要完整的应用栏，只需要标签栏。

下面的代码 - 重点放在 NestedScrollView 部分。非常感谢任何帮助！

class TokenTabs extends StatefulWidget {
  const TokenTabs({Key? key}) : super(key: key);

  @override
  State<TokenTabs> createState() => _TokenTabsState();
}

class _TokenTabsState extends State<TokenTabs>
    with SingleTickerProviderStateMixin {
  late int currentTab;
  late TabController tabController;

  @override
  void initState() {
    currentTab = 1;
    tabController = TabController(length: 3, vsync: this, initialIndex: 1);
    tabController.animation!.addListener(() {
      final value = tabController.animation!.value.round();
      if (value != currentTab && mounted) {
        changePage(value);
      }
    });
    super.initState();
  }

  void changePage(int newTab) {
    setState(() {
      currentTab = newTab;
    });
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Color unselectedColor = Colors.grey;

    return NestedScrollView(
      headerSliverBuilder: (context, value) {
        return [
          SliverToBoxAdapter(
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                      width: 0.1, color: Colors.grey.withOpacity(0.5)),
                ),
              ),
              height: 45,
              child: TabBar(
                controller: tabController,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                  color: Colors.orange,
                  width: 3,
                )),
                indicatorPadding: const EdgeInsets.fromLTRB(6.0, 0.0, 6.0, 0.0),
                tabs: [
                  Text(
                    'Posts',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight:
                          currentTab == 0 ? FontWeight.bold : FontWeight.normal,
                      fontSize: 16.0,
                      color: currentTab == 0 ? Colors.black : unselectedColor,
                    ),
                  ),
                  Text(
                    'Holders',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight:
                          currentTab == 1 ? FontWeight.bold : FontWeight.normal,
                      fontSize: 16.0,
                      color: currentTab == 1 ? Colors.black : unselectedColor,
                    ),
                  ),
                  Text(
                    'Rewards',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight:
                          currentTab == 2 ? FontWeight.bold : FontWeight.normal,
                      fontSize: 16.0,
                      color: currentTab == 2 ? Colors.black : unselectedColor,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ];
      },
      body: Container(
        child: TabBarView(
          controller: tabController,
          children: const [
            Text('Posts of users'),
            Text('Other holders'),
            Text('Rewards unlocked'),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以阅读以下有关 Flutter 标签栏视图的文章。希望能帮助到你 https://daniasblog.com/flutter-tabbar-gradient-style/

Answer 2

解决了这个问题 - 只是使用了 DefaultTabController：

 return DefaultTabController(
      length: 3,
      child: Column(
        children: [
          SizedBox(
            height: 40,
            child: TabBar(
              controller: tabController,
              indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(
                color: Colors.orange,
                width: 3,
              )),
              indicatorPadding: const EdgeInsets.fromLTRB(6.0, 0.0, 6.0, 0.0),
              tabs: [
                Text(
                  'Posts',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight:
                        currentTab == 0 ? FontWeight.bold : FontWeight.normal,
                    fontSize: 16.0,
                    color: currentTab == 0 ? Colors.black : unselectedColor,
                  ),
                ),
                Text(
                  'Holders',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight:
                        currentTab == 1 ? FontWeight.bold : FontWeight.normal,
                    fontSize: 16.0,
                    color: currentTab == 1 ? Colors.black : unselectedColor,
                  ),
                ),
                Text(
                  'Rewards',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight:
                        currentTab == 2 ? FontWeight.bold : FontWeight.normal,
                    fontSize: 16.0,
                    color: currentTab == 2 ? Colors.black : unselectedColor,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: tabController,
              children: [
                ListView.builder(
                    itemCount: 100,
                    itemBuilder: (_, int index) {
                      return Text('Index $index');
                    }),
                ListView.builder(
                    itemCount: 100,
                    itemBuilder: (_, int index) {
                      return Text('Index $index');
                    }),
                ListView.builder(
                    itemCount: 100,
                    itemBuilder: (_, int index) {
                      return Text('Index $index');
                    }),
              ],
            ),
          ),
        ],
      ),
    );

Flutter 标签栏视图

Flutter Tab Bar View

android

ios

flutter

flutter-dependencies