首页 > 解决方案 > 如何在 StatelessWidget 中更改 StatefulWidget 的状态?

问题描述

只是测试颤振。下面的代码示例是一个非常简单的颤振应用程序。问题是我不知道如何调用 TestTextState 类中的 setState() 函数,以便在每次按下更改按钮时更改文本。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Test app',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test"),
        ),
        body: new Test(),
      ),
    );
  }
}

class Test extends StatelessWidget {

  final TestText testText = new TestText();

  void change() {
    testText.text == "original" ? testText.set("changed") : testText.set("original");
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: [
        testText,
        new RaisedButton(
            child: new Text("change"),
            onPressed: () => change(),
        ),
      ]
    );
  }
}

class TestText extends StatefulWidget {

  String text = "original";

  void set(String str) {
    this.text = str;
  }

  @override
  TestTextState createState() => new TestTextState();
}

class TestTextState extends State<TestText> {

  @override
  Widget build(BuildContext context) {
    return new Text(this.widget.text);
  }
}

标签: dartwidgetflutterstatestatefulwidget

解决方案


我通过将 _TestTextState 初始化为 TestText 小部件的最终属性来解决这个问题,它允许在按下更改按钮时简单地更新状态。这似乎是一个简单的解决方案,但我不确定这是否是一个好习惯。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Test app',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test"),
        ),
        body: new Test(),
      ),
    );
  }
}

class Test extends StatelessWidget {

  final _TestText text = new _TestText();

  @override
  Widget build(BuildContext context) {
    return new Column(
        children: [
          text,
          new RaisedButton(
            child: new Text("change"),
            onPressed: () => text.update(),
          ),
        ]
    );
  }
}

class TestText extends StatefulWidget {

  final _TestTextState state = new _TestTextState();

  void update() {
    state.change();
  }

  @override
  _TestTextState createState() => state;
}

class _TestTextState extends State<TestText> {

  String text = "original";

  void change() {
    setState(() {
      this.text = this.text == "original" ? "changed" : "original";
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Text(this.text);
  }
}

推荐阅读