时间戳

首页 > 解决方案 > 具有可见半径和图像的圆形按钮作为孩子

user-interface - 具有可见半径和图像的圆形按钮作为孩子

问题描述

目标：实现具有可见半径和图像的完美尺寸圆形按钮

截图演示： 左：设计实施，右：尝试解决方案

从上图可以看出，我尝试了很多这里社区提到的解决方案

包含：

  1. 圆形头像
    CircleAvatar(
     child: Image.asset('assets/images/gucci.jpg')
    )
  1. ClipRRect
    ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.asset(
         'assets/images/gucci.jpg',
         height: 100.0,
         width: 100.0,
      )
    )
  1. 以Ink.image作为子小部件的材质小部件
Material(
   elevation: 1.0,
   shape: CircleBorder(),
   clipBehavior: Clip.hardEdge,
   color: Colors.transparent,
   child: Ink.image(
      image: AssetImage('assets/images/gucci.jpg'),
      fit: BoxFit.cover,
      width: 120.0,
      height: 120.0,
      child: InkWell(
         onTap: () {},
      )
   )
)

关于如何实现这个设计的任何想法？

标签： user-interfaceflutter

解决方案

您有很多选择。其中之一是“FloatingActionButton”。

SizedBox(
  width: 60,
  height: 60,
  child: FittedBox(
    fit: BoxFit.contain,
    child: FloatingActionButton(
      onPressed: () {},
      shape: CircleBorder(
        side: BorderSide(
          color: Colors.black,
          width: 1,
        ),
      ),
      backgroundColor: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(5),
        child: Image.asset('assets/images/gucci.jpg'),
      ),
    ),
  ),
)

我更喜欢它，Container因为所有按钮的属性，如onPressed或点击动画都已经实现FloatingActionButton，你不需要使用GestureDetector或InkWell。

您也可以CircleBorder在任何其他接受 a 的Buttons 或s 中使用。WidgetShapeBorder

推荐阅读