如何在 Flutter 中为单个页面使用多个选项卡

如何解决如何在 Flutter 中为单个页面使用多个选项卡

我为我的项目创建了标签栏。它包括两个标签，每个标签代表两个页面。

这是代码

import 'package:Flutter/material.dart';

class TabView extends StatefulWidget {
  @override
  _TabViewState createState() => _TabViewState();
}

class _TabViewState extends State<TabView> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 2,vsync: this);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),child: Column(
            children: [
              Container(
                height: 45,decoration: Boxdecoration(
                  color: Colors.grey.shade300,borderRadius: BorderRadius.circular(
                    16.0,),child: TabBar(
                  controller: _tabController,indicator: Boxdecoration(
                    borderRadius: BorderRadius.circular(
                      16.0,color: Colors.grey.shade900,labelColor: Colors.white,unselectedLabelColor: Colors.grey.shade900,tabs: [
                    Tab(
                      text: 'One',Tab(
                      text: 'Two',],Expanded(
                child: TabBarView(
                  controller: _tabController,children: [
                    Center(
                      child: Text(
                        'Page One',style: TextStyle(
                          fontSize: 25,fontWeight: FontWeight.w600,Center(
                      child: Text(
                        'Page Two',);
  }
}

这里是输出

我想使用单个页面的标签栏来更改小部件状态。

示例

我想使用标签栏将第一页容器的颜色从红色改为蓝色，不想切换到第二页

我该怎么做？

解决方法

TabBar 不太适合此目的，尽管可以对其进行调整。我建议您使用cupertino 包中的CupertinoSegmentedControl。这是 docs，这是代码示例：

enum _Tab { one,two }

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  _Tab _selectedTab = _Tab.one;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,children: [
        SizedBox(height: 16),CupertinoSegmentedControl<_Tab>(
          selectedColor: Colors.black,borderColor: Colors.black,pressedColor: Colors.grey,children: {
            _Tab.one: Text('One'),_Tab.two: Text('Two'),},onValueChanged: (value) {
            setState(() {
              _selectedTab = value;
            });
          },groupValue: _selectedTab,),SizedBox(height: 64),Builder(
          builder: (context) {
            switch (_selectedTab) {
              case _Tab.one:
                return Center(
                  child: Container(
                    width: 100,height: 100,color: Colors.red,);
              case _Tab.two:
                return Center(
                  child: Container(
                    width: 100,color: Colors.blue,);
            }
          },],);
  }
}

另请看CupertinoSlidingSegmentedControl。

,

• 对于您的要求，根本不要使用 TabBarView，直接使用容器，根据 selectedtab 索引更改其颜色值

class Tabscreenstate extends State<Tabscreen> with TickerProviderStateMixin {
  int selectedTabIndex = 0;
  TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 2,vsync: this);
    tabController.addListener(() {
      setState(() {
        selectedTabIndex = tabController.index;
      });
    });
    super.initState();
  }

  
  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          tabbar(),Container(color:selectedTabIndex == 0 ? Colors.red : Colors.green),);
  }
  
  Widget tabbar() => TabBar(
            controller: tabController,onTap: (value) {
              setState(() {
                selectedTabIndex = value;
              });
            },tabs: [
              Text("tab one"),Text("tab two"),);
}