Question

扑朔迷离地创建示例计算器应用程序。但是不知道如何传达每个是不同的dart文件的小部件。

Main.dart ----------（应用程序的起点）
CalculatorFrame.dart ---------（导入数字板，条目文本框和表格计算器视图）
NumberButton.dart --------（代表按钮小部件）
NumberBoards.dart ----------（导入数字按钮并创建计算器的按钮（0-9）部分）
EntryTextbox.dart -----------（代表按钮按下操作和计算值的文本框条目）

我很难实现与这些小部件的交互。按下按钮后，需要更新EntryTextbox小部件。如果小部件位于不同的dart文件中，该怎么办？

请提出建议。

Answer 1

1。）您需要将CalculatorFrame设置为Stateful小部件。
2。）您需要为EntryTextbox小部件创建一个状态，例如userInput状态，以跟踪当前用户输入的内容。
3。）您需要使用setState小部件时内置的Stateful方法来创建一种更新状态的方法。
4。）您需要将该方法传递给NumberBoards，然后创建一个构造函数以接收该方法，然后将该方法传递给NumberButton小部件。

Answer 2

要在按下按钮时更改EntryTextbox小部件的状态，请使用CalculatorFrame或任何字段将包含的小部件（我想是StatefullWidget）声明为String，您将从中初始化EntryTextbox。实现一个函数，该函数可在按下按钮时更改该字段，并将其作为构造函数参数传递给NumberButton小部件。
这是一个示意性示例：

import 'package:flutter/material.dart';

class CalculatorFrame extends StatefulWidget {
  @override
  _CalculatorFrameState createState() => _CalculatorFrameState();
}

class _CalculatorFrameState extends State<CalculatorFrame> {
  String _text;

  @override
  Widget build(BuildContext context) => ...( // container widget of your choice
    EntryTextbox(text: _text),
    NumberButton(text: '0', onPressed: _onPressed,),
    ...,
    NumberButton(text: '9', onPressed: _onPressed,),
  );

  void _onPressed(String buttonText) =>
      setState(() => _text += buttonText);
}

class EntryTextbox extends StatelessWidget {
  final String text;

  const EntryTextbox({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) => ...(text: text); // text entry widget of your choice
}

class NumberButton extends StatelessWidget {
  final String text;
  final Function(String) onPressed;

  const NumberButton({Key key, this.onPressed, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) => ...Button( // button widget of your choice
    child: Text(text),
    onPressed: () => onPressed(text),
  );
}

由于在您的示例中NumberButton小部件位于NumberBoards小部件内，因此NumberBoards有责任接受onPressed作为构造函数参数并将其传递给每个NumberButton构造函数。
在我的示例中，onPressed接受String参数-被按下的按钮的文本。您可能决定传递int或更复杂的数据类。

这种非架构方法适用于小型应用程序和示例。但是，我宁愿为您的任务使用BLoC或ScopedModel。官方文档的Simple app state management部分可能会有所帮助。

如果其他小部件位于2个不同的dart文件中，则从其他小部件更新小部件

2 个答案: