如何根据选项卡的索引更改其装饰？

问题描述

我正在尝试将标签设计为以下设计：
Images Not Showing in MVC

我已经能够像这样设计它，但是我的问题是如何根据所选索引容器的索引更改其修饰。 如上图所示，已选择“耐克徽标”标签。
默认情况下，我只能在所选标签中更改图标的颜色。
因此我想到了检查索引，以便可以根据是否选择了选项卡来更改容器的装饰。

但是，我无法这样做。

代码：

class HomePage extends StatefulWidget {
  const HomePage({
    Key key,@required this.height,@required GlobalKey<ScaffoldState> scaffoldKey,})  : _scaffoldKey = scaffoldKey,super(key: key);

  final double height;
  final GlobalKey<ScaffoldState> _scaffoldKey;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
 TabController _controller;
  int  _activeTabIndex;

  @override
  void initState() {
    super.initState();

    _controller = TabController(vsync: this,length: 6);
    _controller.addListener(_setActiveTabIndex);

  }

  void _setActiveTabIndex() {
  _activeTabIndex = _controller.index;
}

  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.of(context).size.height;
    final double width = MediaQuery.of(context).size.width;
    return Container(
      height: widget.height,child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
             

 DefaultTabController(
              length: 3,child: Padding(
                padding: const EdgeInsets.only(left: 8.0,top: 15),child: Text(
                  'Brands',style: TextStyle(
                      fontFamily: 'OpenSansLight',fontSize: 30,fontWeight: FontWeight.w400),),new TabBar(
                controller: _controller,isScrollable: true,indicatorWeight: 0.01,unselectedLabelColor:
                    Theme.of(context).textTheme.headline1.color,unselectedLabelStyle: TextStyle(
                    color: Colors.black,fontSize: 20,fontFamily: 'OpenSansLight'),labelStyle: TextStyle(
                    color: Colors.deepPurple,fontWeight: FontWeight.w600,labelColor: Colors.deepPurple,tabs: <Widget>[
                  Tab(
                      child: Container(
                    height: 50,width: 60,child: Center(
                      child: Icon(ShoeCategory.sneakers),decoration: BoxDecoration(
                        color: Colors.white,boxShadow: <BoxShadow>[
                          BoxShadow(
                              color: Theme.of(context).dividerColor,offset: Offset(1,1),blurRadius: 3,spreadRadius: 2)
                        ],borderRadius: BorderRadius.circular(20)),)),Tab(
                      child: Container(
                    height: 50,]),Container(
                height: 250,width: width,child: TabBarView(controller: _controller,children: [
                 //TAB1
                  Container(
                      child: ListView.builder(
                          scrollDirection: Axis.horizontal,itemCount: 8,shrinkWrap: false,itemBuilder: (BuildContext context,int index) {
                            if (index == 7) {
                              return ViewMore(navigationRoute: ChooseKid());
                            }
                            return Padding(
                              padding: const EdgeInsets.all(8.0),child: FeaturedCard(
                                  color1: Colors.lightBlue,color2: Colors.lightBlue[100],url:
                                      'https://i.dlpng.com/static/png/6838599_preview.png',index: random.nextInt(1000000)),);
                          })),//TAB 2
                  Container(
                      child: ListView.builder(
                          scrollDirection: Axis.horizontal,//TAB3
                  Container(
                      child: ListView.builder(
                          scrollDirection: Axis.horizontal,]))

          ]))}

}

解决方法

这是基于您提供的代码的完整示例。我只是添加了一个变量_selectedIndex，将其设置为当前显示的选项卡的索引。每次更改标签时，它都会调用setState来更新_selectedIndex的值并刷新UI，以便所选元素具有不同的颜色和高程。

代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: HomePage());
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  TabController _controller;

  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _controller =
        TabController(vsync: this,length: 5,initialIndex: _selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("asos",style: TextStyle(color: Colors.black)),elevation: 0,backgroundColor: Colors.white,bottom: TabBar(
          controller: _controller,isScrollable: true,indicatorWeight: 0.01,unselectedLabelColor: Theme.of(context).textTheme.headline1.color,labelColor: Colors.white,onTap: (index) => setState(() => _selectedIndex = index),tabs: List<Widget>.generate(
            _controller.length,(index) => Tab(
              child: Container(
                width: 60,alignment: Alignment.center,child: Icon(Icons.beach_access),decoration: BoxDecoration(
                  color: index == _selectedIndex ? Colors.orange : Colors.white,boxShadow: index == _selectedIndex
                      ? <BoxShadow>[
                          BoxShadow(
                              color: Theme.of(context).dividerColor,offset: Offset(1,1),blurRadius: 3,spreadRadius: 2)
                        ]
                      : [],borderRadius: BorderRadius.circular(20),),body: TabBarView(
        controller: _controller,children: List.generate(
          _controller.length,(index) => Container(
            alignment: Alignment.center,color: Colors.white,child: Text(
              "TAB $index",style: TextStyle(fontWeight: FontWeight.bold),);
  }
}

屏幕截图

,

我想您只是想实现的目标是选定的标签装饰？ 在这种情况下，您可以使用Tab Controller并使用index属性来获取当前选择的选项卡。然后，您可以检查索引以更改颜色/其他任何属性。

colors: _tabController.index==1?Colors.amber:Colors.white;

在标签的child属性内