簡體   English   中英

如何在同一 lib 文件夾中的其他 screen.dart 文件中使用 main.dart 中的 flutter 變量?

[英]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 .. 你是怎么做到的?

要做到這一點最簡單的方法,通過thatNumFirstScreen構造。 進行下面給出的所需更改

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

注意:您也可以使用狀態管理解決方案,但上述解決方案很容易解決問題。 不過,您可以在此處查看狀態管理解決方案

你可以通過兩種方式來做這件事:

  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 來避免在每個孩子的構造函數中傳遞數據。

我希望這會有所幫助,如有任何疑問,請發表評論。 如果這個答案對您有幫助,請接受並投票。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM