Flutter改变另一个页面的状态（组件状态共享）

蔚落 2023-02-25 02:08 131阅读 0赞

## 1.创建Flutter项目 ##

建议使用命令来创建Flutter项目，因为图像化界面创建速度过慢。

有下面两种创建Flutter项目的方式，我创建的是Android版的Flutter项目

flutter 创建Andorid版本命令语句：flutter create -i objc -a java new\_app(项目名)  
flutter 创建kotlin版本命令语句：flutter create -i objc -a kotlin new\_app(项目名)

## 2.添加provider依赖 ##

在pubspec.yaml文件加入依赖：

provider: ^3.1.0+1

![2020070923580833.png][]

## 3.创建CartModel.dart文件，并在此文件编写CartModel类 ##

这个CartModel类就相当于一个中转站，其中它的strAll变量是可以共享的

String get strAllValue => strAll;  表示把strAll这个变量暴露出来给另外的页面使用，另外的页面就要用strAllValue这个变量了，而不使用strAll变量

notifyListeners(); 这个代码的意思是通知其它页面去更新状态

import 'package:flutter/cupertino.dart';
    
    class CartModel with ChangeNotifier{
      
      String strAll = "";
      String get strAllValue => strAll;
    
      void addStr(String str1,String str2,String str3,String str4,String str5){
        strAll = str1 + str2 + str3 + str4 + str5;
        notifyListeners();
      }
    
    }

## 4.创建FirstPage.dart文件和SecondPage.dart文件，并分别编写FirstPage类和SecondPage类 ##

FirstPage.dart

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    import 'package:test_CartModel/CartModel.dart';
    import 'SecondPage.dart';
    import 'CartModel.dart';
    
    class FirstPage extends StatefulWidget{
      @override
      FirstPageState createState()  => FirstPageState();
    }
    
    class FirstPageState extends State<FirstPage>{
    
      TextEditingController tec1 = new TextEditingController();
      TextEditingController tec2 = new TextEditingController();
      TextEditingController tec3 = new TextEditingController();
      TextEditingController tec4 = new TextEditingController();
      TextEditingController tec5 = new TextEditingController();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("FirstPage"),
    
          ),
          body: ListView(
            children: <Widget>[
              Center(
                child: Padding(
                  padding: EdgeInsets.only(left: 15,right: 15),
                  child: TextField(
                      cursorWidth: 1 ,
                    controller: tec1,
                  ),
                )
              ),
              Center(
                  child: Padding(
                    padding: EdgeInsets.only(left: 15,right: 15),
                    child: TextField(
                      cursorWidth: 1 ,
                      controller: tec2,
                    ),
                  )
              ),
              Center(
                  child: Padding(
                    padding: EdgeInsets.only(left: 15,right: 15),
                    child: TextField(
                      cursorWidth: 1 ,
                      controller: tec3,
                    ),
                  )
              ),
              Center(
                  child: Padding(
                    padding: EdgeInsets.only(left: 15,right: 15),
                    child: TextField(
                      cursorWidth: 1 ,
                      controller: tec4,
                    ),
                  )
              ),
              Center(
                  child: Padding(
                    padding: EdgeInsets.only(left: 15,right: 15),
                    child: TextField(
                      cursorWidth: 1 ,
                      controller: tec5,
                    ),
                  )
              )
            ],
          ),
          floatingActionButton: Consumer<CartModel>(
            builder: (context, CartModel cartModel, child) => FloatingActionButton(
              onPressed: (){
                cartModel.addStr(tec1.text,tec2.text,tec3.text,tec4.text,tec5.text);
              },
              child: child,
            ),
            child: Icon(Icons.add),
          ),
        );
      }
    
    }

SecondPage.dart

其中**final cartModel = Provider.of<CartModel>(context); **这行代码非常重要，用来取得CartModel的动态值

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    import 'package:test_CartModel/CartModel.dart';
    
    class SecondPage extends StatefulWidget{
      @override
      SecondPageState createState()  => SecondPageState();
    }
    
    class SecondPageState extends State<SecondPage>{
    
      @override
      Widget build(BuildContext context) {
        final cartModel = Provider.of<CartModel>(context);
        return Scaffold(
          appBar: AppBar(
            title: Text("SecondPage"),
    
          ),
          body: Center(
            child: Text(
                '从FirstPage中改变SecondPage中的状态:\n\n ${cartModel.strAllValue}',
              style: TextStyle(fontSize: 20),
            ),
          ),
        );
      }
    
    }

## 5.创建MainPage.dart文件，并编写MainPage类 ##

这是整个App的主页面，里边有两个按钮，第一个按钮跳转到FirstPage页面，第二个按钮跳转到SecondPage页面

第一个页面的右下角有个圆形按钮，点击它以后会改变第二个页面的状态

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:test_CartModel/FirstPage.dart';
    
    import 'SecondPage.dart';
    
    class MainPage extends StatefulWidget{
      @override
      MainPageState createState()  => MainPageState();
    }
    
    class MainPageState extends State<MainPage>{
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: '组件状态共享demo',
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            appBar: AppBar(
              title: Text('组件状态共享demo'),
            ),
            body: ListView(
              children: <Widget>[
                SizedBox(
                  height: 10,
                ),
                Center(
                  child: RaisedButton(
    
                    onPressed: (){
                      Navigator.push(
                        context,
                        //动态路由，可以传递参数
                        CupertinoPageRoute(
                          builder: (context) => FirstPage(),
                        ),
                      );
                    },
                      textColor: Colors.white,
                      padding: const EdgeInsets.all(0.0),
                    child: Container(
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: <Color>[
                            Color(0xFF0D47A1),
                            Color(0xFF1976D2),
                            Color(0xFF42A5F5),
                          ],
                        ),
                      ),
                      padding: const EdgeInsets.only(left: 100,top: 10,right: 100,bottom: 10),
                      child: const Text(
                          '跳转到FirstPage',
                          style: TextStyle(fontSize: 20)
                      ),
                    )
    
    
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Center(
                  child: RaisedButton(
    
                      onPressed: (){
                        Navigator.push(
                          context,
                          //动态路由，可以传递参数
                          CupertinoPageRoute(
                            builder: (context) => SecondPage(),
                          ),
                        );
                      },
                      textColor: Colors.white,
                      padding: const EdgeInsets.all(0.0),
                      child: Container(
                        decoration: const BoxDecoration(
                          gradient: LinearGradient(
                            colors: <Color>[
                              Color(0xFF0D47A1),
                              Color(0xFF1976D2),
                              Color(0xFF42A5F5),
                            ],
                          ),
                        ),
                        padding: const EdgeInsets.only(left: 87,top: 10,right: 87,bottom: 10),
                        child: const Text(
                            '跳转到SecondPage',
                            style: TextStyle(fontSize: 20)
                        ),
                      )
    
    
                  ),
                )
              ],
            ),
          ),
        );
      }
    
    }

## 6.修改main.dart文件 ##

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    import 'package:test_CartModel/CartModel.dart';
    import 'package:test_CartModel/MainPage.dart';
    
    
    void main(){
      final cartModel = CartModel();
      runApp(
          Provider.value(
            value: "",
            child: ChangeNotifierProvider.value(
              value: cartModel,
              child: MyApp(),
            )
          )
    
      );
    }
    
    final ThemeData defaultTheme = ThemeData(
        primaryColor: Colors.lightBlue
    );
    
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: '',
          theme: defaultTheme,
          home: MainPage(),
        );
      }
    }

## 7.测试 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3][]

[2020070923580833.png]: /images/20230209/62271ace89e04078bd9884622d275369.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70]: /images/20230209/349f70a2b4a04d36a1d1b297c8799003.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1]: /images/20230209/05f318d0111042b890f189d8b79be811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2]: /images/20230209/aafaa842bc614badb9d199723c5a7bcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3]: /images/20230209/20abd7e9d8b44849944f628429f4a7cf.png