[英]How do i use flutter variables from main.dart in other screen.dart files in the same lib folder?
我想創建一個應用程序,當我按下 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 .. 你是怎么做到的?
要做到這一點最簡單的方法,通過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)),
),
);
}
}
注意:您也可以使用狀態管理解決方案,但上述解決方案很容易解決問題。 不過,您可以在此處查看狀態管理解決方案
你可以通過兩種方式來做這件事:
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)),
),
);
}
}
創建一個 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 來避免在每個孩子的構造函數中傳遞數據。
我希望這會有所幫助,如有任何疑問,請發表評論。 如果這個答案對您有幫助,請接受並投票。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.