如何为不同的标签栏设置 ontap答案

【问题标题】：how to set ontap for different tabbars flutter如何为不同的标签栏设置 ontap
【发布时间】：2020-05-11 00:17:50
【问题描述】：

我有 10 个标签栏。对于我的 TabBar() 小部件，我设置了 onTap(int) 属性以使用 scrollController.animateto() 方法滚动屏幕。但是对于每个选项卡，我希望它滚动到我的 ListView 中的不同位置并且不知道如何执行此操作。例如，当点击“公园”选项卡时，scrollController 会将列表视图向下滚动到我想要的位置，但是当我点击回“市场”时，它不会将屏幕恢复到原来的位置，而且我不知道如何将其他选项卡设置为不同的位置。谢谢大家。

        body: Stack(
          children: <Widget>[
            Flex(
              direction: Axis.vertical,
              children: <Widget>[
                TabBar(
                  controller: _tabController,
                  isScrollable: true,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.black.withOpacity(0.3),
                  onTap: (int){
                      _scrollController.animateTo(320, duration: Duration(milliseconds: 500), curve: Curves.easeIn);
                  },
                  tabs: choices.map((Choice choice) {
                    return Tab(
                      text: choice.title,
                    );}).toList(),),
                Expanded(
                  flex: 11,
                  child: Container(
                    child: GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                      controller: _scrollController,
                      itemCount: ItemsList.length,
                      itemBuilder: (context, index) {
                        String imgPath = ItemsList[index].image;
                        String namePath = ItemsList[index].name;
                        String descriptionPath = ItemsList[index].d;
                        return ItemCards(
                            itemDescription: descriptionPath,
                            itemName: namePath,
                            gridOutline: GridTile(
                              child: Image.network(imgPath),
                            ),
                            flatButton: myFlat(),
                        );},),),),],),],),

我的标签属于自己的类：

const List<Choice> choices = const <Choice>[
  const Choice(title: 'Markets'),
  const Choice(title: 'Parks'),
  const Choice(title: 'Restaurants'),
  const Choice(title: 'Schools'),
  const Choice(title: 'Shops'),
  const Choice(title: 'Gas'),
  const Choice(title: 'Parking'),
  const Choice(title: 'Clubs'),
  const Choice(title: 'Bars'),
  const Choice(title: 'Theatres'),

];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(choice.title, style: TextStyle(
              color: Colors.black,
            ),),],),),);}}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以使用开关设置不同的位置，我创建了一个函数来返回动画以减少代码：

功能：

Future<void> _scrollControllerAnimation(double offset) {
  return _scrollController.animateTo(
    offset,
    duration: Duration(milliseconds: 500),
    curve: Curves.easeIn,
  );
}

onTap里面的开关：

onTap: (int) {
  switch (int) {
    case 0:
      _scrollControllerAnimation(0);
      break;
    case 1:
      _scrollControllerAnimation(300);
      break;
    case 2:
      _scrollControllerAnimation(500);
      break;
    case 3:
      _scrollControllerAnimation(200);
      break;
    default:
      _scrollControllerAnimation(0);
  }
},

然后将滚动位置添加到其他选项卡。

【讨论】：