如何将数据从无状态小部件发送到有状态小部件? [英] how to send data from a stateless widget to stateful widget?

问题描述

我正在Flutter中创建一个简单的应用程序，其中主要功能中有两个小部件.一个是显示文本小部件，用于在屏幕上显示文本，另一个是从用户那里获取输入，即TextField.这很简单.现在，我在main.dart中创建了一个无状态小部件脚手架，在主体中我称之为两个类.一个是文本字段"无状态小部件(作为独立的dart文件)，另一个是显示"状态小部件(作为独立的dart文件)，因为我想为输入文本字段中的每个更改更新显示内容.现在，我获得了设置并创建了textfield，并在textfield.dart中发送了按钮，我需要将该文本发送至具有状态小部件的display_text.dart.怎么做.没有笑声..编程和颤振新手.

I am creating a simple app in flutter where there are two widgets in main function. one is display text widget which is used to display text to the screen and another one is getting input from the user ie., TextField. this is simple. now i created a stateless widget sacaffold in main.dart and in the body i called two classes. one is 'textfield' stateless widget (as a separate dart file) and another is 'display' stateful widget (as a separate dart file) , since i wanted to update the display for every change in input textfield. now i get the setup and created textfield and send button in textfield.dart and i need to send that text to display_text.dart which has a stateful widget. how to do that. No Laughing pls.. new to programming and flutter.

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

推荐答案

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

you can pass your data through navigator and access using widget object in stateful method.

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

i added the solution in following code.

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

这篇关于如何将数据从无状态小部件发送到有状态小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！