Question

我如何将数据从子窗口小部件提升到直接位于其上方的另一个子窗口小部件。

import 'package:flutter/material.dart';

class Tree extends StatefulWidget {
  @override
  _TreeState createState() => _TreeState();
}

class _TreeState extends State<Tree> {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          bigTree(),
        ],
      ),
    );
  }
}

Widget bigTree() {
  var fruit = data; //Undefined name 'data'.


  return Container(
    child: Row(
      children: <Widget>[
        Text(fruit),
        smallTree(),
      ],
    ),
  );
}

Widget smallTree() {
  var data = 'apple'; //How to lift this data

  return Container(
    child: Text(data),
  );
}

我尝试添加一个构造器`_TreeState（{this.data}）;但它显示为空

Answer 1

您拥有的实际上不是小部件。它们是返回小部件的函数。如果希望bigTree以flutter的传统含义“保持状态”，则需要将其放入扩展StatefulWidget并实现Tree小部件实现create state的类中。当前，作为函数，每次您热重载时，小部件返回函数中的变量将被重置，因此不存在“状态”。

这就是我要改变的方式

import 'package:flutter/material.dart';

class Tree extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          BigTree(),
        ],
      ),
    );
  }
}

class BigTree extends StatefulWidget {
  @override
  _BigTreeState createState() => _BigTreeState();
}

class _BigTreeState extends State<BigTree> {
  final fruit = 'apple';

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Text(fruit),
          SmallTree(fruit),
        ],
      ),
    );
  }
}

class SmallTree extends StatelessWidget {
  SmallTree(this.data);

  final String data;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(data),
    );
  }
}

Answer 2

我认为Nolence的回答很好。我想更笼统地说。我是乞be，但这是我的理解：

使用简单的setState。

您让父窗口小部件管理状态。您将所有有用的“工具”传递给发生动作的无状态子窗口小部件。

class ChildWidget extends StatelessWidget {
  // used tools
    final var inputData;
    final Function changeData;
    ChildWidget(this.inputData, this.changeData);

    
    @override
    Widget build(BuildContext context) {
        return  Container(
            ...
                // action
                onTap: () {
                  changeData(inputData);
                },

                // data usage
                Text('My changed ${inputData.toString()}'),

父小部件中的实现逻辑（定义工具）：

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  // define tools and pass to child
  var inputData = 0;

  void changeData(var outputData) {
    // Implement logic
    print(outputData);
    setState(() {
      inputData += outputData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        ...
        ChildWidget(inputData, changeData),

使用changeData函数时，它将调用statefull小部件以更改状态并重建树（渲染）。

如何将状态从子窗口小部件提升到另一个子窗口小部件

2 个答案:

使用简单的setState。