自定义 Flutter 中 Widget 的点击效果答案

【问题标题】：Customize the click effect of a widget in Flutter自定义 Flutter 中 Widget 的点击效果
【发布时间】：2019-05-31 16:40:51
【问题描述】：

如何在Flutter中自定义一个widget的点击效果，可以在Android中配置：

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
           android:drawable="@drawable/btn_pressed"
/>
<!-- pressed -->
<item android:state_focused="true"
           android:drawable="@drawable/btn_normal"
/>
<!-- focused -->
<item android:drawable="@drawable/btn_normal"
/>
<!-- default -->
</selector>

想问一下如何在Flutter中实现。谢谢！

【问题讨论】：

你能提供一些你想要的细节和你尝试过的一些代码吗！
使用InkWell可以自定义所有点击状态
@iPatel 像这样：stackoverflow.com/questions/53994395/… 我想改变 CustomMultiChildLayout 中项目的状态

标签： flutter flutter-layout

【解决方案1】：

使用这个你可以做自定义点击效果

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'My App',
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  bool isTapped = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: GestureDetector(
          onTapDown: (value) {
            setState(() {
              print('onTapDown');
              isTapped = true;
            });
          },
          onTapUp: (value) {
            setState(() {
              print('onTapUp');
              isTapped = false;
            });
          },
          onTapCancel: () {
            setState(() {
              print('onTapCancel');
              isTapped = false;
            });
          },
          child: _getImage(),
        ),
      ),
    );
  }

  Widget _getImage() {
    AssetImage image = AssetImage('images/icon.png');
    return Image(
      image: image,
      width: 100.0,
      height: 100.0,
      color: isTapped ? Colors.deepOrangeAccent : Colors.orange,
    );
  }
}

【讨论】：