dart 如何在flutter中为按钮添加功能?

f2uvfpb9  于 2023-05-11  发布在  Flutter
关注(0)|答案(3)|浏览(162)

我想添加一个功能,当我按下一个按钮时,文本会显示在屏幕上的某个地方。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'App';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {},
            child: const Text('Text Button'),
          ),
          const SizedBox(height: 30),
          OutlinedButton(
            style: OutlinedButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {},
            child: const Text('Outlined Button'),
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {},
            child: const Text('Contained Button'),
          ),
          const SizedBox(height: 30),
        ],
      ),
    );
  }
}
7ivaypg9

7ivaypg91#

在按钮中调用changeText方法单击

String _label = "Text";
  int count = 0 ;

  void changeText(){
    setState(() {
      _label = "Count $count" ;
    });
  }

      ElevatedButton(
        style: ElevatedButton.styleFrom(
          textStyle: const TextStyle(fontSize: 20),
        ),
        onPressed: () {
        changeText() // this function
        },
        child: const Text('Contained Button'),
      )
2mbi3lxu

2mbi3lxu2#

StatelessWidget转换为StatefulWidget
然后在顶部初始化一个字符串值,如下所示:

String test = '';

然后在您的高架按钮上方或屏幕中的任何位置使用测试值初始化如下所示的文本小部件:

Text(test),

然后在其中一个按钮中设置Sate以更改字符串test的值:

TextButton(
        style: TextButton.styleFrom(
          textStyle: const TextStyle(fontSize: 20),
        ),
        onPressed: () {
          setState(() {
            test = 'hello wolrd';
          });
        },
        child: const Text('Text Button'),
      ),
dgenwo3n

dgenwo3n3#

您应该可以识别StatelessWidgetStatefulWidget
StatelessWidget仅在初始化时更新,但StatefulWidget动态更改如果您使用的是Android Studio或Vscode或Intellij,则很容易在它们之间进行更改,只需单击StatelessWidget然后更改它
你可以创建_showText函数并在你的buttton中调用它,这里是完整的代码:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  static const String _title = 'App';

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: MyApp._title,
      home: MyWidget()
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
String testText="";

   _showText(){
    setState(() {
      testText= "Show my Text";

    });
      
    }


  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text("$testText"),
          TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {
              _showText();
            },
            child: const Text('Text Button'),
          ),
          const SizedBox(height: 30),
          OutlinedButton(
            style: OutlinedButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {},
            child: const Text('Outlined Button'),
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {},
            child: const Text('Contained Button'),
          ),
          const SizedBox(height: 30),
        ],
      ),
    );
  }
}

相关问题