Flutter TabBarView小部件在数据更改后未更新

时间:2020-08-30 08:40:01

标签: flutter

当我单击按钮时,将其设置在第一页上。将修改列表数据,然后滑动到第二页。页面滑动没有问题,但是第二页数据没有显示。

如何正确显示第二页上的数据?

enter image description here

正确的页面应如下图所示

enter image description here

但是实际上就是这样

enter image description here

这是我的演示代码

import 'package:flutter/material.dart';

class TabBarDemoPage extends StatefulWidget {
  @override
  _TabBarDemoPage createState() => _TabBarDemoPage();
}

class _TabBarDemoPage extends State<TabBarDemoPage>
    with SingleTickerProviderStateMixin<TabBarDemoPage> {
  TabController tabController;

  List<int> list = [];

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'TabBar demo',
        ),
        backgroundColor: Colors.indigo,
      ),
      body: Column(
        children: [
          Container(
            color: Color(0xfff1f1f1),
            child: TabBar(
              controller: tabController,
              indicator: BoxDecoration(
                color: Colors.white,
              ),
              isScrollable: false,
              labelStyle: TextStyle(
                fontSize: 12,
                color: Color(0xFF4D4D4D),
                fontWeight: FontWeight.bold,
              ),
              indicatorWeight: 0,
              indicatorSize: TabBarIndicatorSize.tab,
              labelPadding: const EdgeInsets.only(left: 0.0),
              unselectedLabelColor: Color(0xFF333333),
              labelColor: Theme.of(context).primaryColor,
              tabs: [
                Tab(
                  child: Text("A"),
                ),
                Tab(
                  child: Text("B"),
                ),
                Tab(
                  child: Text("C"),
                ),
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: tabController,
              physics: NeverScrollableScrollPhysics(),
              children: [
                Center(
                  child: FlatButton(
                    color: Colors.amberAccent,
                    onPressed: () {
                      setState(() {
                        list = [1, 2, 3, 4];
                      });
                      tabController.animateTo(1);
                    },
                    child: Text("ddd"),
                  ),
                ),
                ListView.separated(
                  itemBuilder: (context, index) => SizedBox(
                    height: 50.0,
                    child: ListTile(
                      title: Text("Current Value = ${list[index]}"),
                      onTap: () {},
                    ),
                  ),
                  separatorBuilder: (context, index) => Divider(),
                  itemCount: list.length,
                ),
                Center(
                  child: Text("page 3"),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

0 个答案:

没有答案