Flutter 从小部件中获取文本

Question

我来自 java，现在开始使用 Flutter。

在我的第一个应用程序中，我正在玩弄布局和按钮，但我在让按钮操作正常工作时遇到了困难，这可能是因为我来自 java。

在我的应用中，我有以下小部件：

  Widget _buttonOne = RaisedButton(
    onPressed: () {},
    child: Text('Button One', style: TextStyle(fontSize: 20)),
  );

  final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

 Container(
    padding: const EdgeInsets.all(8),
    child: _textContainer,
    color: Colors.teal[200],
 ),

现在我想打印容器的按钮和 textchild 的文本。我如何做到这一点？

 CupertinoButton.filled(
     child: Text('Button Two'),
     onPressed: () {
         print(_textContainer);   // how do I print the text of the text widget here? 
         print (_buttonOne. ....); // on java there is a getText() method .... how does this work in flutter? 
 ),

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用as 进行类型转换，然后访问属性data
代码sn-p

CupertinoButton.filled(
                child: Text('Button Two'),
                onPressed: () {
                  print(_textContainer.data);
                  print(((_buttonOne as RaisedButton).child as Text).data);
                }),

输出

I/flutter (30756): Container One
I/flutter (30756): Button One

完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget _buttonOne = RaisedButton(
    onPressed: () {},
    child: Text('Button One', style: TextStyle(fontSize: 20)),
  );

  final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CupertinoButton.filled(
                child: Text('Button Two'),
                onPressed: () {
                  print(_textContainer
                      .data); // how do I print the text of the text widget here?
                  print(((_buttonOne as RaisedButton).child as Text).data);
                }),
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以使用data 属性访问Text 小部件的text：

final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

@override
Widget build(BuildContext context) {
   return Scaffold(body: 
      Center(
         child: CupertinoButton.filled(
           child: Text('Button Two'),
           onPressed: () =>
                  {print(_textContainer.data)},
           )
        )
    );
 }

以类似的方式，您可以访问RaisedButton child 的内容：

final _raisedButtonText = const Text('Button One', style: TextStyle(fontSize: 20));

Widget _buttonOne = RaisedButton(onPressed: () {}, child: _raisedButtonText);

final _textContainer =
      const Text('Container One', textAlign: TextAlign.center);

@override
Widget build(BuildContext context) {
   return Scaffold(body: 
      Center(
         child: CupertinoButton.filled(
           child: Text('Button Two'),
           onPressed: () {
                  print(_textContainer.data);
                  print(_raisedButtonText.data);
              }
           )
        )
    );
 }