将容器 child 放入容器边界内

Question

我想在 container 中放置一些颜色小部件 rounded border child 的数量是 dynamic。在我的代码中，children 小部件显示在边框顶部并且变得混乱。我希望我的 children（彩色）小部件位于边框内，这样我就可以得到一个圆形的进度条。

Scaffold(
        body: Center(
          child: Container(
            height: 40,
            width: 302,
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(
                Radius.circular(8.0),
              ),
              border: Border.all(
                width: 1,
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  height: 40,
                  width: 180,
                  color: Colors.green,
                  child: const FittedBox(
                    child: Text(
                      '60%',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 40,
                  width: 90,
                  color: Colors.blue,
                  child: const FittedBox(
                    child: Text(
                      '30%',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 40,
                  width: 30,
                  color: Colors.red,
                  child: const FittedBox(
                    child: Text(
                      '10%',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      )

PS: 我不想改变children widget border 因为children widget number是0~10动态的。

Answer 1

据我了解，你不需要容器，而是 ClipRRect 来剪辑要四舍五入的内容，即 smth 是这样的：

...
child: DecoratedBox(
      position: DecorationPosition.foreground,
      decoration: BoxDecoration(
        borderRadius: borderRadius,
        border: Border.all(
          width: borderWidth,
          color: Colors.amber,
        ),
      ),
      child: ClipRRect(
        borderRadius: borderRadius,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: contentWidgets,
        ),
      )
...

不过，在我看来更好的方法是添加带有内容填充的圆形背景，这样我们就不会在剪辑内容和容器边框之间有带有脚手架背景的剪辑孔，如下所示：

...
child: DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: borderRadius,
            color: Colors.amber,
          ),
          child: Padding(
            padding: EdgeInsets.all(borderWidth),
            child: ClipRRect(
              borderRadius: borderRadius,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: contentWidgets,
              ),
            ),
          ),
        )
...

working example can be found here

将容器 child 放入容器边界内

Put container child inside container border

flutter

flutter-layout