Question

我正在Flutter中创建一个简单的应用程序，其中主要功能中有两个小部件。一个是显示文本小部件，用于将文本显示到屏幕上，另一个是从用户那里获取输入，即TextField。这很简单。现在，我在main.dart中创建了一个无状态小部件脚手架，在主体中创建了两个类。一个是“文本字段”无状态小部件（作为单独的dart文件），另一个是“显示”状态小部件（作为一个单独的dart文件），因为我想为输入文本字段中的每个更改更新显示。现在，我获得了设置并创建了textfield，并在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),
      ),
    );
  }
}

Answer 1

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

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

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

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

1 个答案: