Question

我想创建一个当我按floatActionButton时随机生成我的幸运数字的应用。我想在2个飞镖文件中执行此操作。让我向您展示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文件中声明的numbale。您该怎么做？

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)),
      ),
    );
  }
}

注意：您也可以使用状态管理解决方案，但是上述解决方案可以轻松解决该问题。不过，您可以检查状态管理解决方案here

Answer 2

您可以通过两种方式执行此操作：

根据FirstScreen的依赖传递变量。
使用InheritedWidget。

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。使用InheritedWidget。

按如下所示创建一个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的子窗口小部件，并且该子窗口小部件不需要将thatNum传递给其他任何窗口小部件，则应thatNum依赖地传递。

如果您的Widget层次结构较长，需要此数据，则必须使用InheritedWidget以避免在每个子构造函数中传递数据。

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

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

2 个答案:

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

2。使用InheritedWidget。