Question

我有一个动画的标签栏，该标签栏通常可以正常工作，但是我想对此小部件进行概括，问题是当我调用此小部件时它不起作用，而当我调用列表表单时。

我的目标是，当我单击一个图标时，选项卡栏会设置动画，但同时使用多个不同的选项卡来调用它。跑自己看看。

import 'package:flutter/material.dart';
class AnimatedTabsOne extends StatefulWidget {

  final List<BuildTab> buildTab;

  AnimatedTabsOne({this.buildTab});

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

class _AnimatedTabsOneState extends State<AnimatedTabsOne> {
  int index;

//    final myTabs = [BuildTab(), BuildTab(), BuildTab()];

  @override
  Widget build(BuildContext context) {
    print("this.index: ${this.index}");
    print("index: $index");
    return Container(
//      width: 300.0,
      height: 60.0,
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(0, 3.5),
              blurRadius: 4.0,
            ),
          ]),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List<Widget>.from(
          widget.buildTab.map((tab) {
            final index = widget.buildTab.indexOf(tab);
            return GestureDetector(
              child: BuildTab(isVisible: this.index == index),
              onTap: () {
                if (this.index != index) {
                  setState(() {
                    this.index = index;
                  });
                }
              },
            );
          }),
        ),
      ),
    );
  }
}

class BuildTab extends StatelessWidget {
  final bool isVisible;
  final Icon icona;
  final Text theText;

  BuildTab({this.isVisible = false, this.icona, this.theText});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 200),
      width: isVisible ? 150 : 50,
      height: 50.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5.0),
        color: isVisible ? Colors.blue : Colors.white,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          icona ?? Icon(Icons.remove),
          Flexible(
            child: Visibility(visible: isVisible, child: theText ?? Text("")),
          ),
        ],
      ),
    );
  }
}

这就是我叫小部件的方式

                AnimatedTabsOne(
                  buildTab: <BuildTab> [
                    BuildTab(
                      isVisible: false,
                      icona: Icon(Icons.alarm),
                      theText: Text("Something"),
                    ),
                    BuildTab(
                      isVisible: true,
                      icona: Icon(Icons.account_box),
                      theText: Text("Something"),
                    ),
                    BuildTab(
                      isVisible: false,
                      icona: Icon(Icons.check_circle),
                      theText: Text("Something"),
                    ),
                  ],
                ),

这就是我尝试过的

      GestureDetector(
        onTap: () {
          if (this.index != index) {
            setState(() {
              this.index = index;
            });
          }
        },
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: widget.buildTab,
        ),
      ),

概括tabBar选项卡

0 个答案: