时间戳

首页 > 解决方案 > 如何将数据从无状态小部件发送到有状态小部件？

flutter - 如何将数据从无状态小部件发送到有状态小部件？

问题描述

我正在颤振中创建一个简单的应用程序，其中主要功能中有两个小部件。一个是显示文本小部件，用于在屏幕上显示文本，另一个是从用户那里获取输入，即 TextField。这很简单。现在我在 main.dart 中创建了一个无状态小部件支架，在主体中我调用了两个类。一个是“textfield”无状态小部件（作为单独的 dart 文件），另一个是“显示”有状态小部件（作为单独的 dart 文件），因为我想为输入文本字段的每次更改更新显示。现在我在 textfield.dart 中设置并创建了文本字段和发送按钮，我需要将该文本发送到具有状态小部件的 display_text.dart。怎么做。不要笑，请.. 编程和颤振的新手。

  class TextFieldInput extends StatelessWidget {
  final txtController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          TextField(
            controller: txtController,
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          RaisedButton(
            child: Text('Click Me'),
            onPressed: () {
              //want to send txtController.text to DisplayText (display_text.dart);
            },
          )
        ],
      ),
    );
  }
}


class DisplayText extends StatefulWidget {
  //DisplayText({Key key}) : super(key: key);
  _DisplayTextState createState() => _DisplayTextState();
}

class _DisplayTextState extends State<DisplayText> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        'text from iput text fied here',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
    );
  }
}

标签： flutterdart

解决方案

您可以通过导航器传递数据并使用有状态方法中的小部件对象进行访问。

我在以下代码中添加了解决方案。

import 'package:flutter/material.dart';

class TextFieldInput extends StatelessWidget {
    final txtController = TextEditingController();
    @override
    Widget build(BuildContext context) {
      return Container(
        child: Column(
          children: <Widget>[
            TextField(
              controller: txtController,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            RaisedButton(
              child: Text('Click Me'),
              onPressed: () {
                Navigator.push(
                    context, new MaterialPageRoute(
                    builder: (context) => new DisplayText(text: txtController.text,)));
              },
            )
          ],
        ),
      );
    }
  }


  class DisplayText extends StatefulWidget {
    String text;
      DisplayText({Key key,this.text}) : super(key: key);
    _DisplayTextState createState() => _DisplayTextState();
  }

  class _DisplayTextState extends State<DisplayText> {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: Text(
          widget.text,
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      );
    }
  }

推荐阅读