小白学Flutter - 点击按钮 改变按钮图片 和 改按钮的文

修改图片

class _MyButtonState extends State<MyButton> {
  bool isImage1 = true;

  void changeButtonImage() {
    setState(() {
      isImage1 = !isImage1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            changeButtonImage();
          },
          child: isImage1
              ? Image.asset('assets/image1.png') // 第一张图片
              : Image.asset('assets/image2.png'), // 第二张图片
        ),
      ],
    );
  }
}

在上述示例中，我们创建了一个StatefulWidget，其中包含一个按钮。按钮的图像根据isImage1变量来显示不同的图像。初始情况下，isImage1为true，显示第一张图像。当用户点击按钮时，onPressed回调函数changeButtonImage被调用，该函数通过setState来切换isImage1的状态，从而改变按钮的图像。

请注意，按钮的图像可以使用Image.asset来加载，您可以根据需要更改图像的路径。这是一种常见的方法，用于在用户与应用程序交互时更改按钮的图像。

修改文字

class _MyButtonState extends State<MyButton> {
  String buttonText = 'Click Me';

  void changeButtonText() {
    setState(() {
      buttonText = 'Button Clicked';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            changeButtonText();
          },
          child: Text(buttonText),
        ),
      ],
    );
  }
}

在上述示例中，我们创建了一个StatefulWidget，其中包含一个按钮。按钮的文本被存储在buttonText变量中，初始值为'Click Me'。当用户点击按钮时，onPressed回调函数changeButtonText被调用，该函数通过setState来更新buttonText，从而更改按钮的文本。

您可以根据需要自定义按钮的文本和样式，并使用类似的方法来实现按钮文本的动态更改。这是一种常见的做法，用于在用户与应用程序交互时更新按钮上的文本。