Flutter 按钮中的自定义图像

Question

我正在尝试创建一个按钮，它会在按下时执行某些操作，假设如果用户点击它（或点击并按住），它也会调用函数 _pressedButton()，图像会发生变化。

把它想象成一个按下自定义图片的按钮。

在后续中，我是否也可以根据一些外部因素来更改图像？例如。如果某个函数 A returns 为真，则显示图像 1，否则显示图像 2

Answer 1

您可以在 Flutter interactivity tutorial 中了解有关按钮和状态的所有信息。

例如，这里有一个按钮，每次单击它时都会显示不同的猫。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  String _url = getNewCatUrl();

  static String getNewCatUrl() {
    return 'http://thecatapi.com/api/images/get?format=src&type=jpg&size=small'
           '#${new DateTime.now().millisecondsSinceEpoch}';
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Cat Button'),
      ),
      body: new Center(
        child: new FloatingActionButton(
          onPressed: () {
            setState(() {
              _url = getNewCatUrl();
            });
          },
          child: new ConstrainedBox(
            constraints: new BoxConstraints.expand(),
            child: new Image.network(_url, fit: BoxFit.cover, gaplessPlayback: true),
          ),
        ),
      ),
    );
  }
}

Answer 2

实现您想要的效果的一种简便方法是使用 GestureDetector()

GestureDetector(
        onTap: () {
          //desired action command
        },
        child: Container(
          alignment: Alignment.center,
          width: 100,
          height: 100,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.asset('assets/icons/user.png'),
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            color: Colors.teal,
          ),
        ),
      ),

结果：

GestureDetector() 基本上模仿了一个按钮。

Flutter 按钮中的自定义图像

Custom image in a button in Flutter

flutter