如何使用按鈕的 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);
  }
}