首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >颤振:控制波纹效应对IconButton的影响

颤振:控制波纹效应对IconButton的影响
EN

Stack Overflow用户
提问于 2022-02-02 06:50:38
回答 3查看 444关注 0票数 3

我有一个IconButton,当按下时,波纹效应是圆形的,比按钮的面积还要大,当按钮被点击时,我怎样才能减小波纹效应的大小?

代码语言:javascript
运行
复制
 IconButton(
                  constraints: const BoxConstraints(minWidth: 30),
                  icon: SvgPicture.asset(
                    'asset_path',
                    color: Colors.white,
                  ),
                  onPressed: () {
                    // do something
                  },
                )

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-02-02 07:14:13

代码语言:javascript
运行
复制
  splashRadius: 120,

代码语言:javascript
运行
复制
 IconButton(
   iconSize: 80,
   splashRadius: 120,
   splashColor: Colors.green,
   tooltip: 'Répète le mot',
   icon: Icon(
        Icons.mic,
        color: Colors.red[900],
   ),

使用splashRadius控制

票数 4
EN

Stack Overflow用户

发布于 2022-02-02 07:20:17

我经常为IconButton使用这个包装小部件,因为通常您希望将splashRadius设置为1/2 * size

代码语言:javascript
运行
复制
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),
      ),
    );
  }
}
票数 1
EN

Stack Overflow用户

发布于 2022-02-02 07:15:35

试试这个:

代码语言:javascript
运行
复制
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
      );
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70951493

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档