如何在Flutter中为LinearProgressIndicator添加边界/圆角半径?

ix0qys7i  于 2023-01-09  发布在  Flutter
关注(0)|答案(9)|浏览(530)

我正在尝试在Flutter中为LinearProgressIndicator添加边界半径。
在下面的代码中,当我用另一个小部件(例如Text)替换LinearProgressIndicator时,它可以正常工作。

Container(
  decoration: new BoxDecoration(
      borderRadius:
          new BorderRadius.all(const Radius.circular(20.0))),
  child: LinearProgressIndicator(
    value: _time,
  ),
)

busg9geu

busg9geu1#

1)使用小工具

Container(
          margin: EdgeInsets.symmetric(vertical: 20),
          width: 300,
          height: 20,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            child: LinearProgressIndicator(
              value: 0.7,
              valueColor: AlwaysStoppedAnimation<Color>(Color(0xff00ff00)),
              backgroundColor: Color(0xffD6D6D6),
            ),
          ),
        )

2)使用相关性

不同类型指示器列表https://pub.dev/packages/percent_indicator
试用此模板代码

child:  Padding(
          padding: EdgeInsets.all(15.0),
          child:  LinearPercentIndicator(
            width: MediaQuery.of(context).size.width - 50,
            animation: true,
            lineHeight: 20.0,
            animationDuration: 2000,
            percent: 0.9,
            linearStrokeCap: LinearStrokeCap.roundAll,
            progressColor: Colors.greenAccent,
          ),
        )

zte4gxcn

zte4gxcn2#

    • 编辑:**我只是想指出我的答案没有考虑到填充在栏中的"值"的结尾,这是OP想要的。然而,似乎很多人来这个问题是为了寻找我提供的答案,(就像我在找到答案并回来回答之前一样)。

所以如果你需要这个指示器的内部也有一个圆边,截至目前我认为Amit的公认答案是最好的路线。如果指示器的内部可以有一个平边,你不想使用第三方包,我认为我下面的答案仍然是最好的选择。

    • 原件:**

实际上你不需要使用第三方的包,你可以用ClipRRect小部件 Package LinearProgressIndicator,并给它一个圆形的边界半径。如果你想给它一个特定的厚度/高度,你可以使用一个容器作为中介:

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Container(
    height: 10,
      child: LinearProgressIndicator(
        value: 0.35, // percent filled
        valueColor: AlwaysStoppedAnimation<Color>(Colors.orange),
        backgroundColor: Color(0xFFFFDAB8),
      ),
    ),
  )

如果放置在另一个定义宽度的小工具中,将产生以下结果:

e0uiprwp

e0uiprwp3#

让我们试试我的自定义进度条,简单,不使用任何库:)

class ProgressBar extends StatelessWidget {
 final double max;
 final double current;
 final Color color;

 const ProgressBar(
  {Key? key,
  required this.max,
  required this.current,
  this.color = AppColors.secondaryColor})
  : super(key: key);
  @override
  Widget build(BuildContext context) {
  return LayoutBuilder(
  builder: (_, boxConstraints) {
    var x = boxConstraints.maxWidth;
    var percent = (current / max) * x;
    return Stack(
      children: [
        Container(
          width: x,
          height: 7,
          decoration: BoxDecoration(
            color: Color(0xffd3d3d3),
            borderRadius: BorderRadius.circular(35),
          ),
        ),
        AnimatedContainer(
          duration: Duration(milliseconds: 500),
          width: percent,
          height: 7,
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(35),
          ),
        ),
      ],
    );
  },
);
}
}
pwuypxnk

pwuypxnk4#

我要离开我的答案,以防有人正在寻找一些自定义的,基本的自定义BorderRadius

Container(
        height: 24.0,
        margin: EdgeInsets.only(top: 12.0, bottom: 2.0),
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(Radius.circular(4.0)),
        ),
        clipBehavior: Clip.antiAlias,
        child: FractionallySizedBox(
          alignment: Alignment.centerLeft,
          widthFactor: 0.57,
          heightFactor: 1.0,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.all(Radius.circular(4.0)),
            ),
            clipBehavior: Clip.antiAlias,
          ),
        ),
      ),

欢迎尝试:)

pkln4tw6

pkln4tw65#

您可以尝试以下代码:

Container(
   decoration: const BoxDecoration(
   borderRadius: BorderRadius.all(Radius.circular(40.0))),
   child: const ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                  child: LinearProgressIndicator(
                    minHeight: 5.0,
                    value: 0.2,
                    color: Colors.white,
                    backgroundColor: Color(0xFF3B2D73),
                  ),
                ),
xtfmy6hx

xtfmy6hx6#

要使内条变圆,我们需要使用以下逻辑:
1.使外部进度条变圆,使用ClipRRect并设置borderRadius
1.要使内部进度条变圆,我们可以使用Container,其中我们将使用borderRadius使一侧(右侧)变圆。然后,我们将使用Stack将其放置在进度条的顶部。容器的宽度实际上将是进度条中显示的进度。

Container(
          width: (MediaQuery.of(context).size.width - 30) *
              calculateProgressBarValue(Data1, Data2),
          height: 6,
          decoration: BoxDecoration(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(CommonDimens.MARGIN_10),
                bottomLeft: Radius.circular(CommonDimens.MARGIN_10),
              ),
              color: progressBarColor,

        ),

完整代码:

ClipRRect(
      borderRadius: const BorderRadius.all(Radius.circular(10)),
      child: Stack(
        children: [
          ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            child: LinearProgressIndicator(
              minHeight: 6.0,
              valueColor:
                  AlwaysStoppedAnimation<Color>(Colors.grey),
              value: 1,
            ),
          ),
          Positioned(
            right: 0,
            child: Container(
              width: ((MediaQuery.of(context).size.width) - 30) *
                  calculateProgressBarValue(Data1,Data2),
              height: 6,
              decoration: BoxDecoration(
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(CommonDimens.MARGIN_10),
                    bottomLeft: Radius.circular(CommonDimens.MARGIN_10),
                  ),
                  color: progressBarColor,
            ),
          ),
        ],
      ),
    );
r7s23pms

r7s23pms7#

您可以使用curved_progress_bar,它既有曲线圆形进度指示器,也有曲线线性进度指示器,它的工作原理就像正常的圆形进度指示器和线性进度指示器。

8gsdolmq

8gsdolmq8#

不需要将LinearPercentIndicator Package 在容器小部件中。您可以只使用LinearPercentIndicator获得所需的输出。
参见模板代码

LinearPercentIndicator(
        lineHeight: 40.0,
        barRadius: const Radius.circular(20.0),
        percent: 0.7,
        animation: true,
        animationDuration: 1000,
        backgroundColor: Color(0xFFD6D6D6),
        progressColor: Color(0xFF5BFB82),          
    ),
s4chpxco

s4chpxco9#

你可以试试我的库(capped_progress_indicator),它可以做你想做的事情,和Flutter最初的LinearProgressIndicatorCircularProgressIndicator完全一样,它不仅可以圆化音轨/背景的末端,还可以圆化进度/指示器的末端。
因此,只需安装该软件包并将代码从

LinearProgressIndicator(
  // ...
)

import 'package:capped_progress_indicator/capped_progress_indicator.dart';

LinearCappedProgressIndicator(
  // ...
)

您还可以根据自己的喜好更改拐角半径

LinearCappedProgressIndicator(), // Circle end (default).
LinearCappedProgressIndicator(cornerRadius: 5), // Rounded end.
LinearCappedProgressIndicator(cornerRadius: 0), // Square end.

相关问题