Question

我正在尝试获取一条指示工作进度的行。我使用 LinearProgressIndicator-Widget。我的结构大致如下：

 Container( // outer Container
    width: widgetWidth,
    decoration: BoxDecoration(
        color: lectionColor, 
        borderRadius: BorderRadius.circular(10)),
    child: Column(children[
        // multiple other children 
        Conatiner( // inner Container
            height: deviceHeight * 0.005,
            width: widgetWidth,
            child: LinearProgressIndicator(
                value: percentageOfMediaAlreadyDone,
                backgroundColor: Colors.transparent,
                valueColor: AlwaysStoppedAnimation<Color>(progressColor),
                ),
            )
        )
    ])

问题是，内部 Container 和 LinearProgressIndicator 离开了外部 Container 的 BorderRadius（如图所示）。 Problem progressBar 应该和外部 Container 一样宽，但只显示在外部 Container 所在的位置（所以只在蓝色 Container 上，而不是在白色背景上）。

即使我将 BorderRadius.only 添加到内部 Container，也不能解决问题，因为 1) 它不够高 & 2) LinearProgressIndicator 再次忽略此 borderRadius（如图所示）。 Failed try to fix

我目前的解决方法是减小内部 Container 的宽度，使其不与外部 Container 的 BorderRadius 冲突，但我对那个版本不满意。

[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19041.746], locale en-DE)
[√] Android 工具链 - 为 Android 设备开发（Android SDK 版本 30.0.2）

Answer 1

您可以尝试用ClipRRect

包裹外层Container

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Container(
   ...

父母边框外的小部件（半径）

1 个答案: