我有一个IconButton
,当按下时,波纹效应是圆形的,比按钮的面积还要大,当按钮被点击时,我怎样才能减小波纹效应的大小?
IconButton(
constraints: const BoxConstraints(minWidth: 30),
icon: SvgPicture.asset(
'asset_path',
color: Colors.white,
),
onPressed: () {
// do something
},
)
发布于 2022-02-02 07:14:13
splashRadius: 120,
IconButton(
iconSize: 80,
splashRadius: 120,
splashColor: Colors.green,
tooltip: 'Répète le mot',
icon: Icon(
Icons.mic,
color: Colors.red[900],
),
使用splashRadius控制
发布于 2022-02-02 07:20:17
我经常为IconButton
使用这个包装小部件,因为通常您希望将splashRadius
设置为1/2 * size
class CircularIconButton extends StatelessWidget {
/// The function that will be executed once the button has been pressed.
final void Function()? onPressed;
/// The icon that will be displayed in the middle of the button.
final IconData iconData;
/// The size of the entire button.
final double size;
/// The relative size of the icon compared to entire button's [size].
///
/// By setting the [iconSizeRatio], you can define the size of the icon itself.
/// The icon's size will be equal to `size / iconSizeRatio`.
///
/// Allowed values range from 1.0 to 4.0.
final double iconSizeRatio;
/// The color of your icon.
///
/// It is also used for the splash color (i.e. the background color of the icon button once it has been pressed) with an opacity of 0.5.
///
/// The default is [Colors.black].
final Color? iconColor;
/// The background color of the circle that is enclosing your icon.
final Color fillColor;
/// The color that is used for the circle's border.
final Color outlineColor;
const CircularIconButton({
Key? key,
required this.iconData,
this.onPressed,
this.size = 36.0,
this.iconSizeRatio = 1.5,
this.fillColor = Colors.transparent,
this.outlineColor = Colors.transparent,
this.iconColor,
}) : assert(
iconSizeRatio >= 1.0 && iconSizeRatio <= 4.0,
'The iconSizeRatio must be between 1.0 and 4.0.',
),
super(key: key);
@override
Widget build(BuildContext context) {
final appliedIconColor = iconColor ?? IconTheme.of(context).color;
return Ink(
width: size,
height: size,
decoration: ShapeDecoration(
color: fillColor,
shape: CircleBorder(
side: BorderSide(
color: outlineColor,
),
),
),
child: IconButton(
// Adjust the splashRadius based on the icons size.
// It defaults to 35.0.
splashRadius: size / 2,
iconSize: size / iconSizeRatio,
padding: EdgeInsets.zero,
onPressed: onPressed,
icon: Icon(
iconData,
color: appliedIconColor,
),
splashColor: appliedIconColor?.withOpacity(0.5),
),
);
}
}
发布于 2022-02-02 07:15:35
试试这个:
class CustomIconButton extends StatelessWidget {
const CustomIconButton({ Key? key, required this.width, required this.child, this.onPressed }) : super(key: key);
final double width;
final Widget child;
final void Function()? onPressed;
@override
Widget build(BuildContext context) {
return InkWell(
borderRadius: BorderRadius.all(Radius.circular(50)),
child: SizedBox(
height: 100,
width: 100,
child: child,
),
onTap: onPressed
);
}
}
https://stackoverflow.com/questions/70951493
复制相似问题