时间戳

首页 > 解决方案 > 如何将状态从子小部件提升到另一个子小部件

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

问题描述

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

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}); 但它的出现为空

标签： flutter

解决方案

你所拥有的实际上并不是小部件。它们是返回小部件的函数。如果您希望 bigTree 在 Flutter 的传统含义中“保持状态”，您需要将其变成一个类，该类可以StatefulWidget像您的小部件一样扩展和实现创建状态Tree。目前，作为函数，每次热重载时，小部件返回函数中的变量都会被重置，因此不存在“状态”。

这就是我要改变的方式

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

推荐阅读