如何在同一 lib 文件夹中的其他 screen.dart 文件中使用 main.dart 中的 flutter 变量？

Question

我想创建一个应用程序，当我按下 floatActionButton 时，它会随机生成我的幸运数字。 我想在 2 个 dart 文件中完成。让我向您展示 dart.main 和 first_screen.dart 中的代码。

dart.main

import 'package:demo/app_screens/first_screen.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: MyFlutterApp()
));

class MyFlutterApp extends StatefulWidget {
  @override
  _MyFlutterAppState createState() => _MyFlutterAppState();
}

class _MyFlutterAppState extends State<MyFlutterApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        centerTitle: true,
        title: Text('My first App',style: TextStyle(color: Colors.black, fontSize: 25.0),),
      ),
      body: FirstScreen(),
     floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
          int thatNum = generateLuckyNumber();
        });},
        child: Icon(Icons.add),
     ),
    );
  }
}

和 lib/screens 目录中的first_screen.dart

import 'dart:math';

import 'package:flutter/material.dart';

class FirstScreen extends StatefulWidget{
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(color: Colors.lightBlue,
      child: Center(
        child: Text('My lucky number is ${thatNum}',style: TextStyle(
            fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
      ),
    );
  }


}

int generateLuckyNumber() {
  var random= Random();
  int luckyNumber= random.nextInt(10);
  return luckyNumber;
}

我想使用 first_screen.dart 文件中 main.dart 文件中声明的变量 thatNum .. 你是怎么做到的？

Answer 1

要做到这一点最简单的方法，通过thatNum在FirstScreen构造。 进行下面给出的所需更改

class _MyFlutterAppState extends State<MyFlutterApp> {
  int thatNum;   // <- declare thatNum in the class
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        centerTitle: true,
        title: Text('My first App',style: TextStyle(color: Colors.black, fontSize: 25.0),),
      ),
      body: FirstScreen(thatNum:thatNum),  // <-- pass thatNum in constructor
     floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
          thatNum = generateLuckyNumber();  /* <- generateLuckyNumber and assign to thatNum */
        });},
        child: Icon(Icons.add),
     ),
    );
  }
}

在FirstScreen声明thatNum

class FirstScreen extends StatefulWidget{
  final thatNum;   // <- declare thatNum
  FirstScreen({this.thatNum});
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

在_FirstScreenState检查是否widget.thatNum为空或不是。 如果它为空，则分配加载文本或显示thatNum如果不是小部件widget.thatNum不为空。

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(color: Colors.lightBlue,
      child: Center(
        child: Text('My lucky number is ${widget.thatNum??"Loading"}',style: TextStyle(
            fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
      ),
    );
  }
}

注意：您也可以使用状态管理解决方案，但上述解决方案很容易解决问题。 不过，您可以在此处查看状态管理解决方案

Answer 2

你可以通过两种方式来做这件事：

1. 传递依赖于 FirstScreen 的变量。
2. 使用继承的Widget。

1. 传递依赖于 FirstScreen 的变量。

body: FirstScreen(thatNum), // in Scaffold of main.dart file.

像这样使用它：

class FirstScreen extends StatefulWidget{
  final thatNum;
  FirstScreen(this.thatNum);
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(color: Colors.lightBlue,
      child: Center(
        child: Text('My lucky number is ${widget.thatNum} ??"Loading"}',style: TextStyle(
            fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
      ),
    );
  }
}

2. 使用继承的Widget。

创建一个 InheritedWidget 如下。

class MyInheritedWidget extends InheritedWidget {
  const MyInheritedWidget({
    Key key,
    @required this.thatNum,
    @required Widget child,
  }) : assert(color != null),
       assert(child != null),
       super(key: key, child: child);

  final thatNum;

  static MyInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }

  @override
  bool updateShouldNotify(MyInheritedWidget old) => thatNum!= old.thatNum;
}

更改： body: FirstScreen(),改为： body: MyInheritedWidget(child: FirstScreen(), thatNum:thatNum),

现在 MyInheritedWidget 的所有后代都可以使用如下上下文访问 thatNum：

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    final thatNum = MyInheritedWidget.of(context).thatNum;
    return Material(color: Colors.lightBlue,
      child: Center(
        child: Text('My lucky number is $thatNum ??"Loading"}',style: TextStyle(
            fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
      ),
    );
  }
}

如果您有一个需要thatNum的子 Widget 并且该子小部件不需要将thatNum传递给任何进一步的小部件，那么thatNum应该依赖传递。

如果您有一个很长的 Widget 层次结构需要这些数据，那么必须使用 InheritedWidget 来避免在每个孩子的构造函数中传递数据。

我希望这会有所帮助，如有任何疑问，请发表评论。 如果这个答案对您有帮助，请接受并投票。