在flutter中创建可滚动列表

whhtz7ly  于 2023-02-09  发布在  Flutter
关注(0)|答案(1)|浏览(147)

我想做一个可滚动的制表视图。标签栏视图列表的长度不是固定的。我想在滚动列表项时更改选择标签,标签也应该在点击时工作。代码给出了异常消息:

    • 发生异常。_Assert错误('package:flutter/src/material/tab_controller. dart ':Assert失败:第181行位置12:'值〉= 0 &&(值〈长度||长度== 0)":不正确)**

当scroll到达列表的最后一个并ontap时,选项卡不会滚动到其列表。
下面是我的代码:

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

col17t5w

col17t5w1#

存在名为“isScrollable:“在选项卡栏中

相关问题