flutter - 如何将平铺图像添加到我的 BoxDecoration

Question

我创建了一个有效的 alpha 滑块控件。 滑块 alpha 渐变效果很好。

现在，我想为我的滑块创建一个方格背景。 我希望滑块具有方格背景，看起来像这样（请注意方格的圆角）：

滑块的大小是可变的，所以我想我需要平铺一个小的棋盘格图案 PNG。

这是我当前的代码：

      gradient = LinearGradient(
          colors: colors,
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter);

    Widget content = Positioned(
      left: left,
      top: top,
      child: Container(
        width: barWidth,
        height: barHeight,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black),
            borderRadius:
                BorderRadius.all(Radius.circular(10)),
            gradient: gradient),
            
      ),
    );

我想我需要使用“ImageShader”，但我无法让它工作。

Answer 1

您可以在当前布局的堆栈中使用背景的 PNG。

Answer 2

使用堆栈：

  gradient = LinearGradient(
      colors: colors,
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter);

Widget content = Positioned(
  left: left,
  top: top,
  child: Stack(
    children: [
  Container(//same width & height & corderRadius
    child: Image.asset(// with repeat: ImageRepeat.repeatX,
  ),
  Container(
    width: barWidth,
    height: barHeight,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black),
        borderRadius:
            BorderRadius.all(Radius.circular(10)),
        gradient: gradient),
        
  ),
    ],
);

Answer 3

创建方格图案的一小部分（2 个正方形宽）并将重复图像添加到BoxDecoration 。

Widget content = Positioned(
  left: left,
  top: top,
  child: Container(
    width: barWidth,
    height: barHeight,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black),
      borderRadius: BorderRadius.all(Radius.circular(10)),
      gradient: gradient,
      image: DecorationImage(
        repeat: ImageRepeat.repeatX,
        image: AssetImage('asset_name'),
      ),
    ),
  ),
);