Question

目标：实施尺寸合适的圆形按钮，并在其可见的范围内显示半径，并将图像作为孩子

该屏幕截图演示：

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

包括：

CircleAvatar

print(compare_prices(x, y))
{'36': 345.0, '36.5': 360.0, '37.5': 355.0, '38': 375.0, '38.5': 375.0, '39': 370.0, '40': 380.0, '40.5': 395.0, '41': 345.0, '42': 300.0, '42.5': 230.0, '43': 220.0, '44': 220.0, '44.5': 220.0, '45': 220.0, '45.5': 290.0, '46': 225.0, '47': 300.0, '47.5': 265.0, '48': 287, '48.5': 275.0, '49': 386, '49.5': 567, '50.5': 850, '51.5': 399}

ClipRRect

    CircleAvatar(
     child: Image.asset('assets/images/gucci.jpg')
    )

材料小部件，其中 Ink.image 作为子小部件

    ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.asset(
         'assets/images/gucci.jpg',
         height: 100.0,
         width: 100.0,
      )
    )

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

Answer 1

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

cmd.exe

与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或Button中使用Widget。

Answer 2

我猜您想在按钮周围添加一些填充和边框。

SizedBox(
      width: 100,
      height: 100,
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
          shape: BoxShape.circle,
        ),
        child: Material(
          elevation: 1.0,
          shape: CircleBorder(),
          clipBehavior: Clip.hardEdge,
          color: Colors.transparent,
          child: InkWell(
            child: Ink.image(
              image: AssetImage('assets/images/gucci.jpg'),
            ),
          ),
        ),
      ),
    ),

Answer 3

您可以尝试使用Container()和GestureDetector()来实现点击功能，我想这可以做到

代码

GestureDetector(
   onTap: (){},
   child: Container(
     height: 120.0,
     width: 120.0,
     decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 1.5),
        borderRadius: BorderRadius.circular(80),
        image: DecorationImage(
            image: AssetImage('assets/images/gucci.jpg'),
            fit: BoxFit.cover
        )
     )
   )
)

您可以通过玩width中的border: Border.all(color: Colors.black, width: 1.5)来更改边框的粗细，对于circular container，请在此行borderRadius: BorderRadius.circular(80),中进行更改。这会有所帮助。

Answer 4

用Container或Inkwell包裹GestureDetector。

以下是示例代码：

    InkWell(
           onTap: (){},
            child: Container(
              width: 65,
              height: 65,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/gucci.jpg'),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.all(Radius.circular(50.5)),
                border: new Border.all(
                 color: Colors.black,
                 width: 2.0,
               ),
              ),
            ),
          )

GestureDetector(
            onTap: (){},
            child: Container(
              width: 65,
              height: 65,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/gucci.jpg'),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.all(Radius.circular(50.5)),
                border: new Border.all(
                 color: Colors.black,
                 width: 2.0,
               ),
              ),
            ),
          ),

具有可见半径的“圆形”按钮和儿童图像

4 个答案: