Question

我需要将图标放入CircleAvatar窗口小部件中，以允许用户上传其图像。

类似这样的东西：

这是我的代码：

child: CircleAvatar(
  child: Stack(
    children: <Widget>[
      Positioned(
        bottom: 0,
        right: 0,
        left: 0,
        height: 33,
        child: Container(
          height: 20,
          width: 30,
          color: Color.fromRGBO(0, 0, 0, .74),
          child: Center(
            child:
                Icon(Icons.photo_camera, color: Colors.grey),
          ),
        ),
      )
    ],
  ),
  radius: 68.0,
  backgroundImage:
      NetworkImage('https://via.placeholder.com/300'),
  backgroundColor: Colors.transparent,
)

但是我有这个结果：

带有照相机图标的内部框从父窗口小部件（CircleAvatar）中溢出；

Answer 1

只需--ClipOval

您的代码：

body: Center(
        child: CircleAvatar(
          child: ClipOval(
            child: Stack(
              children: <Widget>[
                Image.network('https://via.placeholder.com/300'),
                Positioned(
                  bottom: 0,
                  right: 0,
                  left: 0,
                  height: 33,
                  child: GestureDetector(
                    onTap: (){
                      print('upload Clicked');
                    },
                    child: Container(
                      height: 20,
                      width: 30,
                      color: Color.fromRGBO(0, 0, 0, .74),
                      child: Center(
                        child: Icon(Icons.photo_camera, color: Colors.grey),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          radius: 68.0,
          // backgroundImage: NetworkImage('https://via.placeholder.com/300'),
          backgroundColor: Colors.transparent,
        ),
      ),

输出：

Answer 2

您可以创建自定义Clipper，为小部件提供圆形底部。

您需要使用ClipPath widget，在包含相机图标的Container情况下传递小部件。

，然后在clipper中传递您的CustomClipper。

ClipPath


    return ClipPath(
      child: your_widget,
      clipper: BottomWaveClipper(),
    );

自定义剪辑


    class BottomCircleClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        //your path to draw circle
      }

      @override
      bool shouldReclip(TriangleClipper oldClipper) => false;
    }

有些链接可以为您提供帮助。

https://iirokrankka.com/2017/09/04/clipping-widgets-with-bezier-curves-in-flutter/

https://medium.com/flutter-community/clipping-in-flutter-e9eaa6b1721a

CircleAvatar假发（Flutter）隐藏了溢出

2 个答案: