在颤动中制作可滚动的列表选项卡视图答案

【问题标题】：make scrollable list tabview in fluuter在颤动中制作可滚动的列表选项卡视图
【发布时间】：2023-02-06 18:12:17
【问题描述】：

我想制作一个可滚动的 tablist 视图。tabbarview 列表的长度不固定。我想在滚动 listitem 时更改选择选项卡，并且该选项卡也应该可以在点击时使用。代码将异常消息给出为发生异常。 _AssertionError ('package:flutter/src/material/tab_controller.dart': Failed assertion: line 181 pos 12: 'value >= 0 && (value < length || length == 0)': is not true.)当滚动到达列表的最后一个并点击时，选项卡不会滚动到其列表。

这是我的代码：

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  late TabController _controller;
  late ScrollController _scrollController;

  List<Map<String, List<String>>> _tablist = \[ 
       {  "tab1": \[        "Tab11",        "tab12",        "tab13",        "tab14",      \]
    },
    {
      "tab2": \[        "Tab21",        "tab22",        "tab23","tab24",       \]
    },
     {  "tab3": \[        "Tab31",        "tab32",       \]
    },
    {
      "tab4": \[        "Tab41",        "tab42",        "tab43","tab44",       \]
    },
    
  \];

  @override
  void initState() {
    super.initState();
    _controller = TabController(vsync: this, length: _tablist.length);
    _scrollController = ScrollController();
    _scrollController.addListener(() {
      int index = (_scrollController.offset /
              (_scrollController.position.maxScrollExtent / _tablist.length))
          .floor();
      _controller.animateTo(index);
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Food Menu"),
        bottom: TabBar(
          controller: _controller,
          tabs: _tablist.map((item) => Tab(text: item.keys.first)).toList(),
        ),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _tablist.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>\[
              Container(
                color: _controller.index == index ? Colors.grey\[200\] : null,
                padding: EdgeInsets.all(16),
                child: Text(
                  _tablist\[index\].keys.first,
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              ..._tablist\[index\].values.first.map((item) => ListTile(title: Text(item))).toList()
            \],
          );
        },
      ),
    );
  }
}

我想做成这样https://drive.google.com/file/d/1ZCcAvxnnzNfJiKyQ0ZQG6LUsDxaXVqeD/view?usp=share_link

【问题讨论】：

你的图片链接打不开？
哦，我放错了链接，现在我已经替换了它。
您是否尝试过将“isScrollable: true”转为TabBar属性？
我不是那个意思，我想在滚动该选项卡的列表时更改选定的选项卡

标签： flutter

【解决方案1】：

TabBar 中有一个名为“isScrollable:”的属性

【讨论】：