flutter中使用clip rect值时如何添加ImageFilter模糊效果

问题描述 投票:0回答:1

当剪辑值仅在剪辑值显示内更改时,我必须将图像设置为模糊,而不模糊显示模糊的其他部分。

    child: Container(
            height: height,
            width: width,
            decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                width: 2,
                color: _isSelected && _showAlternateContainer
                    ? Colors.black
                    : Colors.red,
              ),
            ),
            child: ClipRect(
              clipBehavior: Clip.hardEdge,
              clipper: MyCustomClipper(
                  clipLeft,
                  clipTop,
                  _showAlternateContainer ? width : clipWidth,
                  _showAlternateContainer ? height : clipHeight),
              child: Image.asset(
                image,
                width: width,
                height: height,
                fit: BoxFit.fill,
              ),
            ),

            
          ),

像这样添加仅剪辑区域显示其他区域显示模糊。

enter image description here

flutter dart
1个回答
0
投票
child: Container(
            height: height,
            width: width,
            decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                width: 2,
                color: _isSelected && _showAlternateContainer
                    ? Colors.black
                    : Colors.red,
              ),
            ),
              child: Stack(
                children: [
                  // Blurred image as the background
                  if(_showAlternateContainer)
                  ImageFiltered(
                    imageFilter: ui.ImageFilter.blur(sigmaX: 3, sigmaY: 3),
                    child: Image.asset(
                      image,
                      width: width,
                      height: height,
                      fit: BoxFit.fill,
                    ),
                  ),
                  // Clipped area with clear image
                  ClipRect(
                    clipBehavior: Clip.hardEdge,
                    clipper: MyCustomClipper(
                      clipLeft,
                      clipTop,
                      clipWidth,
                      clipHeight,
                    ),
                    child: Image.asset(
                      image,
                      width: width,
                      height: height,
                      fit: BoxFit.fill,
                    ),
                  ),
                ],
              )
          ),
© www.soinside.com 2019 - 2024. All rights reserved.