时间戳

首页 > 解决方案 > 从 Flutter 中的不同文件创建 TextButton

flutter - 从 Flutter 中的不同文件创建 TextButton

问题描述

我目前正在 Flutter (dart) 中开发一个应用程序并在这里遇到一些问题。

我正在尝试从单个文件中创建一个按钮，因此我不必在每次需要创建按钮时复制和粘贴代码（相反，我只需要调用我创建的文件并将一些参数传递给它） .

这是我创建的按钮文件：

class RevisedButton extends StatelessWidget {
  final String descButton;
  final Function press;
  final Color color, textColor;
  const RevisedButton({
    Key key,
    this.descButton,
    this.press,
    this.color,
    this.textColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.all(5),
      width: size.width * 0.88,
      margin: EdgeInsets.symmetric(vertical: 5),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: TextButton(
        onPressed: () {
          var press;
          press = press;
        },
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

我这样称呼它

RevisedButton(
                descButton: 'Login',
                color: Color.fromARGB(255, 108, 110, 127),
                textColor: Colors.white,
                
              ),

我的问题是我不能通过功能按钮来做某事。例如：

RevisedButton(
                descButton: 'Login',
                color: Color.fromARGB(255, 108, 110, 127),
                textColor: Colors.white,
                press: {Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => WelcomePage(),
                      ),
                    );
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Logged In'),
                      ),
                    );}
              ),

但是，当我使用原始代码制作按钮本身（不调用文件）时，我可以做到这一点（像这样：

class RevisedButton extends StatelessWidget {
  final String descButton;
  final Function press;
  final Color color, textColor;
  const RevisedButton({
    Key key,
    this.descButton,
    this.press,
    this.color,
    this.textColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.all(5),
      width: size.width * 0.88,
      margin: EdgeInsets.symmetric(vertical: 5),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: TextButton(
        onPressed: () {
          Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => WelcomePage(),
                      ),
                    );
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Logged In'),
                      ),
                    );
        },
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

任何人都可以帮助我吗？提前致谢！:)

（如果有帮助，我正在使用 VSCode）

标签： flutterdart

解决方案

进行此更改

...
decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: TextButton(
       // Change to this..
        onPressed: press,
        child: Text(
          descButton,
          style: TextStyle(
   ...

当调用它时

RevisedButton(
                descButton: 'Login',
                color: Color.fromARGB(255, 108, 110, 127),
                textColor: Colors.white,
                //Add a closed bracket 
                press: () {Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => WelcomePage(),
                      ),
                    );
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('Logged In'),
                      ),
                    );}
              ),

推荐阅读