整个图标按钮变为灰色：颤动
Posted
技术标签:
【中文标题】整个图标按钮变为灰色：颤动【英文标题】：Whole Icon button becomes grey : flutter 【发布时间】：2021-09-09 19:42:00 【问题描述】：我正在尝试在底部导航栏中的 play_icon 上应用颜色。问题是整个图标变成灰色。我想要实现的是：
我目前拥有的是这样的：
这是代码：
Material(
color:
light_mode ? Color(0xFFFFFFFF) : Color(0xFF616161),
child: Container(
alignment: Alignment.center,
height: 60,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(1.0),
child: IconButton(
icon: Icon(Icons.skip_previous),
onPressed: () ,
color: Colors.grey)),
Padding(
padding: EdgeInsets.only(right: 10),
child: IconButton(
icon: Icon(
Icons.play_circle_fill_outlined,
size: 45),
onPressed: () ,
color: light_mode
? Color(0xFFEA80FC)
: Color(0xFF6D6D6D))),
Padding(
padding: EdgeInsets.all(1.0),
child: IconButton(
icon: Icon(Icons.skip_next),
onPressed: () ,
color: Colors.grey)),
Padding(
padding: EdgeInsets.all(1.0),
child: IconButton(
icon: Icon(
Icons.bookmark_border_outlined),
onPressed: () ,
color: Colors.grey)),
Padding(
padding: EdgeInsets.all(1.0),
child: IconButton(
icon: Icon(Icons.share_rounded),
onPressed: () ,
color: Colors.grey)),
],
)))
【问题讨论】：
【参考方案1】：这个怎么样。
从您的代码中，
Padding(
padding: EdgeInsets.only(right: 10),
child: IconButton(
icon: Icon(Icons.play_circle_fill_outlined, size: 45),
onPressed: () ,
color: light_mode ? Color(0xFFEA80FC) : Color(0xFF6D6D6D),
),
),
到这个。
SizedBox(
width: 36,
height: 36,
child: FloatingActionButton(
onPressed: () ,
backgroundColor:
light_mode ? Color(0xFFEA80FC) : Color(0xFF6D6D6D),
child: Icon(Icons.play_arrow),
),
),
【讨论】：
【参考方案2】：在您的代码中：
Padding(
padding: EdgeInsets.only(right: 10),
child: IconButton(
icon: Icon(
Icons.play_circle_fill_outlined,
size: 45),
onPressed: () ,
color: light_mode
? Color(0xFFEA80FC)
: Color(0xFF6D6D6D))),
您应该为 IconButton 的父级设置颜色，而不是它本身。例如，可以使用带有装饰的容器（通过改变borderRadius可以实现圆形按钮）：
Container(
decoration: BoxDecoration(
color: const Colors.grey,
border: Border.all(
color: Colors.black,
width: 8,
),
borderRadius: BorderRadius.circular(12),
),
padding: EdgeInsets.only(right: 10),
child: IconButton(
icon: Icon(
Icons.play_circle_fill_outlined,
size: 45),
onPressed: () ,
color: Colors.white,
),
【讨论】：
以上是关于整个图标按钮变为灰色：颤动的主要内容，如果未能解决你的问题，请参考以下文章