如何使用按钮的 onPressed 属性将小部件文本的值复制到另一个

Question

我需要复制一个文本小部件的值并将其复制到另一个。

我尝试使用键，但在这种情况下我不知道如何访问文本小部件。

是否可以在 Flutter 中使用 onPressed 属性？

import 'package:flutter/material.dart';

class TextWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text( 
              "Value to be copied",
              key: Key('text1')
            ),
            RaisedButton(
              onPressed: (){
                // code here
              },
              child: Text("Copy value"),
            ),
            SizedBox(height: 40),
            Text(
              "",
              key: Key('text2')
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

直接回答您的问题：您可以使用Text小部件的data属性访问文本。

Text widget = Text('text value');
String text = widget.data;
print(text); // text value

接下来，您不能通过它们的关键属性访问小部件。 至少你不应该，因为它们是为不同的目的而设计的：这里有一个视频和一篇关于 Flutter 中的键的文章。

你可以在这里做的是把你的TextWidget从StatelessWidget变成StatefulWidget并根据 state 渲染你的第二个Text的内容。 state 是什么以及为什么要使用它的很好的介绍可以在官方 Flutter 网站上找到： 开始以声明方式思考。

然后您可以将您的第一个Text小部件保存在一个变量中，然后使用data属性更新直接访问其内容，然后更新整个小部件的 state。

DartPad 上的示例 1

正如 Sebastian 和 MSARKrish 所建议的那样，更规范且通常更可取的方法是基于 state 呈现两个按钮的内容，并从 state 变量而不是小部件本身获取所需的文本。

DartPad 上的示例 2

请注意，您不能像在 JavaScript DOM API 和innerText中那样强制更改 Text 小部件的data属性：

_textWidget.data = "New text"; // Doesn't work

因为它的data是final的。 在 Flutter 中，您必须进行声明式思考，这是值得的。

Answer 2

class TextWidget extends StatefulWidget {
@override
 _TextWidgetState createState() => _TextWidgetState();
 }

class _TextWidgetState extends State<TextWidget> {
  String text1Value = "text to be copied";

  String text2Value = "";

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Text(
               text1Value,
              ),
             RaisedButton(
               onPressed: () {
                 setState(() {
                   text2Value = text1Value;
                  });
               },
               child: Text("Copy value"),
             ),
             SizedBox(height: 40),
            Text(
              text2Value,
            )
        ],
    ),
  ),
  );
 }
}

Answer 3

尝试这个

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String _text = "Value to be copied";
  bool _buttonToggle;

  @override
  void initState() {
    super.initState();

    _buttonToggle = false;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(_text),
        SizedBox(height: 40),
        RaisedButton(
          onPressed: _toggle,
          child: Text("Copy value"),
        ),
        Switch(
          value: _buttonToggle,
          onChanged: (_) => _toggle(),
        ),
        SizedBox(height: 40),
        Text(_buttonToggle ? _text : '')
      ],
    );
  }

  void _toggle() {
    setState(() => _buttonToggle = !_buttonToggle);
  }
}