如何为IconButtons或提升的按钮添加闪亮的颜色或涟漪效果
如何为IconButtons或提升的按钮添加闪亮的颜色或涟漪效果
提问于 2021-06-04 20:36:08
在这个屏幕上有一个iconButton，用户在重复一个单词之前必须轻触麦克风。我在IconButton的属性中添加了splashcolor，但是当用户点击的时候什么都不显示。ToolTip也是如此。
我注意到我在其他屏幕上提升按钮的随机行为，有时我们会看到连锁反应，有时我们不会。是不是我做错了什么？我在论坛上读到，有时这些效果会“在”另一个小部件下发生，所以我们看不到它们。
有关于如何使用特效的规则吗？
代码如下：
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, 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,
),
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text('Voici ce que j\'ai compris : '),
Text(uD.spokenWords),
],
),
),
),
),
],
),
);回答 1
Stack Overflow用户
发布于 2021-06-04 20:45:17
您需要使用Material小部件包装IconButton小部件，如下所示：
Container(
color: Colors.white,
child: Center(
child: Material(
color: Colors.transparent,
child: IconButton(
iconSize: 80,
splashRadius: 120,
splashColor: Colors.green,
tooltip: 'Répète le mot',
icon: Icon(
Icons.mic,
color: Colors.red[900],
),
onPressed: () {
print('test');
}),
),
),
),只有当飞溅和波纹出现在某种类型的材质部件(例如卡片)上时，才会显示它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67837357
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号