如何在顫動中為按鈕添加功能？

我想添加一個功能，當我按下按鈕時，文本會顯示在螢屏上的某處。

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

如果你能提供幫助，謝謝。

uj5u.com熱心網友回復：

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'),
      )

uj5u.com熱心網友回復：

將您的轉換StatelessWidget 為StatefulWidget

然后在頂部初始化一個字串值，如下所示：

String test = '';

然后在您提升的按鈕上方或螢屏中的任何位置使用測驗值初始化如下所示的文本小部件：

     Text(test),

然后在您的一個按鈕 setSate 中更改字串測驗的值：

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

uj5u.com熱心網友回復：

你應該認識到StatelessWidget和StatefulWidget

StatelessWidget僅在初始化時更新，但StatefulWidget如果您使用 Android Studio 或 Vscode 或 Intellij 則動態更改，那么很容易在它們之間進行更改，只需單擊StatelessWidget然后更改它

您可以創建 _showText函式并在按鈕中呼叫它，這是完整的代碼：

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

標籤：扑镖颤振布局

上一篇：如何在Dart/Flutter上執行toJson編碼方法？

下一篇：Flutter-FireBase復合查詢-不顯示任何結果