RawMaterialButton 中的 Flutter 动态文本

Posted 2023-02-23

【中文标题】RawMaterialButton 中的 Flutter 动态文本

【英文标题】：Flutter dynamic text in RawMaterialButton

【发布时间】：2020-08-14 09:14:47

【问题描述】：

我正在用颤振创建自己的样式按钮。到目前为止，我创建了一个commonui.dart 文件并放置了以下代码

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

class CustomButton extends StatelessWidget 
  CustomButton(@required this.onPressed);
  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) 
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: const <Widget>[
            SizedBox(
              width: 10.0,
            ),
            Text(
              "Tap Me",
              maxLines: 1,
              style: TextStyle(color: Colors.white,fontFamily: 'ActoBold'),
            ),
          ],
        ),
      ),
      onPressed: onPressed,

    );
  

然后像这样从我的页面调用它

CustomButton(
     onPressed: () 
        print("Tapped Me");
      ,
)

我想让按钮文本动态化。如何将变量传递给CustomButton 小部件？

【问题讨论】：

你为什么不做 print(variablename);打电话的时候？

【参考方案1】：

进行以下更改...

CustomButton(
child: Text(trigger),
 onPressed: () 
    setState(()
          trigger="tapped me";
)
  ,
)

不要忘记声明变量并将您的类无状态更改为有状态小部件。

【参考方案2】：

像刚才对 onPressed 函数所做的那样做。唯一的区别是类型是字符串。

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

class CustomButton extends StatelessWidget 
  final GestureTapCallback onPressed;
  final String buttonText;

  CustomButton(@required this.onPressed, this.buttonText);

  @override
  Widget build(BuildContext context) 
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: const <Widget>[
            SizedBox(
              width: 10.0,
            ),
            Text(
              buttonText ?? 'Tap me',
              maxLines: 1,
              style: TextStyle(color: Colors.white,fontFamily: 'ActoBold'),
            ),
          ],
        ),
      ),
      onPressed: onPressed,
    );
  

然后您可以将您的值传递给 CustomButton。

CustomButton(
   buttonText: 'Updated Text',
   onPressed: () 
      print("Tapped Me");
   ,
)

如果您想在单击按钮时动态更改值，请使用有状态小部件：

class App extends StatefulWidget 
  @override
  _AppState createState() => _AppState();


class _AppState extends State<App> 
  String _buttonText;
  Widget build(BuildContext context) 
    return Scaffold(
      body: CustomButton(
        buttonText: _buttonText,
        onPressed: () 
          print("Tap Me");
          setState(() 
            _buttonText = 'Tapped';
          );
        ,
      ),
    );