如何在 2 个不同的文件之间传递变量并操作它们

Question

我正在学习颤振，我想知道如何在 2 个不同的文件之间传递变量或方法（以添加其他小部件）。 在我的示例中，我在创建新项目时使用了 Flutter 提供的代码，在此代码中，我添加了第二个名为“second.dart”的文件，其中我在文件 main“main.dart”中获取了变量“_counter” " 乘以 10。

main.dart

import 'package:flutter/material.dart';
import 'second.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Container(
              child: Second(),
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

second.dart

import 'package:flutter/material.dart';
import 'main.dart';

class Second extends StatefulWidget {
  @override
  _SecondState createState() => _SecondState();
}

class _SecondState extends State<Second> {
  
  int counter10 = _MyHomePageState._counter * 10;


  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: 200,
      height: 300,
      child: Text('My increment * 10 : $counter10 '),
    );
  }
}

但是，我有这个错误。“_MyHomePageState”以红色突出显示。

lib/second.dart:11:18：错误：找不到 Getter：'_MyHomePageState'。 var counter10 =_MyHomePageState._counter * 10;

感谢您的帮助

Answer 1

请注意，这不是我们将变量传递给其他文件或其他小部件的方式。要创建一个小部件，您需要在有状态或无状态之间进行选择，如果您想从 Second class 内部操作状态，请将其声明为有状态，但在您的情况下，您需要有一个无状态小部件。

例如：

    class Second extends StatelessWidget {
      final int counter;
    
      const Second({Key key, this.counter}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return  Container(
      color: Colors.red,
      width: 200,
      height: 300,
      child: Text('My increment * 10 : ${counter * 10} '));
      }
    }

然后从你的第一个传递这个变量是这样的：

import 'package:flutter/material.dart';
import 'second.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Container(
              child: Second(counter:_counter),
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

注意：您可以通过跨类引用它们来共享普通变量，但它们不应该是私有的，例如在它们前面有一个_。另一件事即使您共享变量，它也不会直接对第二页产生任何影响，因为颤动不知道它正在发生变化，而只是将其视为一个实例。

您可以使用类共享静态数据： 例子

class AppStrings {
static Color appColor = Colors.blue;
} 

稍后将其称为 AppStrings.appColor

Answer 2

您应该在代码中执行以下操作：

1. 当我们使用下划线作为变量名的第一个字符时，就意味着这个变量是私有的！所以你不能在第二个小部件中使用int counter10 = _MyHomePageState._counter * 10;！

2. 如果要将变量传递给子窗口小部件，则需要创建一个构造函数，如下所示：

    class Second extends StatefulWidget {
    
      int counter;
    
      Second(this.counter);
      @override
      _SecondState createState() => _SecondState();
    }

1. 现在您可以将 _countre 变量传递给第二个小部件：

    Container(
                  child: Second(_counter),
                ),

如果有任何问题或错误，请告诉我。