flutter - 如何在同一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是否为null。如果为null，则分配Loading文本，如果不是 thatNum不为null，则显示 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