如何向 IconButtons 或提升的 Buttons 添加飞溅颜色或涟漪效果

如何解决如何向 IconButtons 或提升的 Buttons 添加飞溅颜色或涟漪效果

在这个屏幕上有一个 iconButton，一个用户在重复一个词之前必须点击的麦克风。我在 IconButton 的属性中添加了 splashcolor，但是当用户点击时没有任何显示。工具提示也是一样。

我注意到我在其他屏幕上的升高按钮会出现随机行为，有时我们会看到涟漪效应，有时则不会。有什么我做错了吗？我在论坛上读到，有时这些效果发生在另一个小部件的“下方”，所以我们看不到它们。

是否有使用效果的规则？

代码如下：

SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,children: [
          Container(
            padding: EdgeInsets.all(12.0),child: Text(
              'Ecoute et répète 5 fois le mot en anglais.',style: TextStyle(color: Colors.indigo[700],fontSize: 17),),Container(
            margin: const EdgeInsets.all(12),decoration: Boxdecoration(
              color: Colors.white,border: Border.all(
                width: 1.0,borderRadius: BorderRadius.circular(10.0),padding: const EdgeInsets.all(16),child: Row(
              children: [
                Container(
                  height: 200,child: Image.asset(
                    'images/avatar_teacher.jpeg',Padding(
                  padding: const EdgeInsets.all(3.0),child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,children: [
                      Container(
                        child: Text(
                          'An adult',style: TextStyle(
                            color: Colors.red[900],fontSize: 23,Container(
                        margin: const EdgeInsets.only(bottom: 60),child: Text(
                          'Un adulte',style: TextStyle(
                            color: Colors.indigo[900],fontSize: 15,GestureDetector(
                        child: Container(
                          height: 45,margin: EdgeInsets.fromLTRB(0,5.0,15.0),alignment: Alignment.topRight,child: Icon(
                            Icons.volume_up,color: Colors.indigo[500],size: 55.0,onTap: () {
                          Tts.speak(phrase: 'little',langue: Language.english);
                        },Container(
                        alignment: Alignment.topRight,child: Text('/adult/'),],Container(
            color: Colors.white,child: Center(
              child: IconButton(
                  iconSize: 80,splashRadius: 120,splashColor: Colors.green,tooltip: 'Répète le mot',icon: Icon(
                    Icons.mic,color: Colors.red[900],onpressed: () {
                    uD.checkSpokenWords('adult',reussite);
                  }),Container(
            alignment: Alignment.center,child: Text(
              'Clique sur le micro et répète le mot',textAlign: TextAlign.center,style: TextStyle(
                color: Colors.black45,fontSize: 15.0,SizedBox(
            height: 2.0,Visibility(
            visible: false,child: Container(
              width: double.infinity,alignment: Alignment.centerLeft,margin: const EdgeInsets.only(top: 12),decoration: Boxdecoration(
                color: Colors.white,border: Border.all(
                  width: 1.0,child: Padding(
                padding: const EdgeInsets.all(8.0),child: Row(
                  children: [
                    Text('Voici ce que j\'ai compris : '),Text(uD.spokenWords),);

解决方法

你需要像这样用一个 Material 小部件包装你的 IconButton 小部件：

if 'show' in clean_result['format']['tags']:
    show_value = str(clean_result['format']['tags']['show'])

飞溅和涟漪只有在某种类型的材料小部件（例如卡片）上才会显示。