flutter - TabBarView 内容未在 setstate 上更新

Question

Check video for more clearifacation
gitlab link
我的代码

import 'package:flutter/material.dart';
import 'package:flutter_app/Page.dart';

import 'page1.dart';

void main() => runApp(MyAppPages());

class MyApp extends StatefulWidget {
  String message;
  MyApp(this.message) {}
  @override
  _MyAppState createState() => _MyAppState(message);
}

class _MyAppState extends State<MyApp> {
  String message;
  _MyAppState(this.message) {}


  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(message),
      ),

    );
  }
}

class MyAppPages extends StatefulWidget {
  @override
  _MyAppPages createState() => _MyAppPages();
}

class _MyAppPages extends State<MyAppPages> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          floatingActionButton: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: (){

           this.setState(() {
              ct+=1;
            print("ct $ct");
            });
          }),
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(
                    child: GestureDetector(
                      child: Text("page1"),
                      onTap: () {
                      this.  setState(() {
                          ct += 1;
                        });
                        print("ct $ct");
                  },
                )),
                Tab(child: Text("page2")),
                Tab(child: Text("page3"))
              ],
            ),
          ),
          body:
              TabBarView(children: [MyApp("sub_1_ct_$ct"),MyApp("sub_2_ct_$ct"), MyApp("sub_3_ct_$ct")]),
        ),
      ),
    );
  }

  int ct = 0;

}

import 'package:flutter/material.dart';

import 'Page.dart';

class Page1 extends StatefulWidget {
  List<Page> data;
  Page1({this.data,Key key}) : super(key: key);

  @override
  _Page1State createState() => _Page1State(data:data);
}

class _Page1State extends State<Page1> {
  List<Page> data;
  _Page1State({this.data}){

  }
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: data.length,
        itemBuilder: (context,index){
      return Container(
        margin: EdgeInsets.all(10),
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text(data[index].title),
            ),
          ),
        ),
      );
    });
  }
}

class Page{
  String title;
  Page({this.title}){

  }
}

1 : https://youtu.be/CZKILXh9PcA

Answer 1

您不必在 State 类中创建构造函数，只需从它们的 Stateful 小部件中获取值即可。而是使用 widget.variable_in_stateful_widget 来获取值。

import 'package:flutter/material.dart';

void main() => runApp(MyAppPages());

class MyAppPages extends StatefulWidget {
  @override
  _MyAppPages createState() => _MyAppPages();
}

class _MyAppPages extends State<MyAppPages> {
  int ct = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(child: Text("page1")),
                Tab(child: Text("page2")),
                Tab(child: Text("page3"))
              ],
            ),
          ),
          body: TabBarView(
            children: [
              MyApp("sub_1_ct_$ct"),
              MyApp("sub_2_ct_$ct"),
              MyApp("sub_3_ct_$ct")
            ],
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              setState(() {
                ct += 1;
              });
            },
          ),
        ),
      ),
    );
  }
}

class MyApp extends StatefulWidget {
  final String message;

  MyApp(this.message);

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

class _MyAppState extends State<MyApp> {
  //String message;
  //_MyAppState(this.message) {}
  // TODO: this constructor called only once when `MyApp` widget added to widget tree.
  //  Calling setState in `_MyAppPages` won`t trigger this constructor call, instead it will use `_MyAppState` that is already build in the widget tree.
  // use `widget.message` directly to get the new here


  List<Page> data1 = [Page(title: "a1"), Page(title: "b1"), Page(title: "c1")];
  List<Page> data2 = [Page(title: "a2"), Page(title: "b2"), Page(title: "c2")];
  List<Page> data3 = [Page(title: "a3"), Page(title: "b3"), Page(title: "c3")];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(child: Text(widget.message)),
              Tab(child: Text(widget.message)),
              Tab(child: Text(widget.message))
            ],
          ),
        ),
        body: TabBarView(children: [
          Page1(
            data: data1,
          ),
          Page1(
            data: data2,
          ),
          Page1(
            data: data3,
          )
        ]),
      ),
    );
  }
}

class Page1 extends StatefulWidget {
  final List<Page> data;

  Page1({this.data, Key key}) : super(key: key);

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

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: widget.data.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.all(10),
            child: Card(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListTile(
                  title: Text(widget.data[index].title),
                ),
              ),
            ),
          );
        });
  }
}

class Page {
  String title;

  Page({this.title});
}