我正在尝试在Flutter中为LinearProgressIndicator
添加边界半径。
在下面的代码中,当我用另一个小部件(例如Text
)替换LinearProgressIndicator
时,它可以正常工作。
Container(
decoration: new BoxDecoration(
borderRadius:
new BorderRadius.all(const Radius.circular(20.0))),
child: LinearProgressIndicator(
value: _time,
),
)
9条答案
按热度按时间busg9geu1#
1)使用小工具
2)使用相关性
不同类型指示器列表https://pub.dev/packages/percent_indicator
试用此模板代码
zte4gxcn2#
所以如果你需要这个指示器的内部也有一个圆边,截至目前我认为Amit的公认答案是最好的路线。如果指示器的内部可以有一个平边,你不想使用第三方包,我认为我下面的答案仍然是最好的选择。
实际上你不需要使用第三方的包,你可以用ClipRRect小部件 Package LinearProgressIndicator,并给它一个圆形的边界半径。如果你想给它一个特定的厚度/高度,你可以使用一个容器作为中介:
如果放置在另一个定义宽度的小工具中,将产生以下结果:
e0uiprwp3#
让我们试试我的自定义进度条,简单,不使用任何库:)
pwuypxnk4#
我要离开我的答案,以防有人正在寻找一些自定义的,基本的自定义BorderRadius
欢迎尝试:)
pkln4tw65#
您可以尝试以下代码:
xtfmy6hx6#
要使内条变圆,我们需要使用以下逻辑:
1.使外部进度条变圆,使用ClipRRect并设置borderRadius
1.要使内部进度条变圆,我们可以使用Container,其中我们将使用borderRadius使一侧(右侧)变圆。然后,我们将使用Stack将其放置在进度条的顶部。容器的宽度实际上将是进度条中显示的进度。
完整代码:
r7s23pms7#
您可以使用curved_progress_bar,它既有曲线圆形进度指示器,也有曲线线性进度指示器,它的工作原理就像正常的圆形进度指示器和线性进度指示器。
8gsdolmq8#
不需要将LinearPercentIndicator Package 在容器小部件中。您可以只使用LinearPercentIndicator获得所需的输出。
参见模板代码
s4chpxco9#
你可以试试我的库(capped_progress_indicator),它可以做你想做的事情,和Flutter最初的
LinearProgressIndicator
和CircularProgressIndicator
完全一样,它不仅可以圆化音轨/背景的末端,还可以圆化进度/指示器的末端。因此,只需安装该软件包并将代码从
到
您还可以根据自己的喜好更改拐角半径