用多种填充颜色扑向半圈

Question

我想在颤音中创建它：

我知道您可以创建一个半个圆圈，例如 this 。

但是我如何获得这些多种填充颜色？

我知道有lineargradient可以完成此操作。 （类似这样的东西）

但是我需要起作用，但是我需要使用每个颜色截面作为一个分开的零件/小部件，因为我想在下一步中对它们进行动画。

我怎么能完成这个？

Answer 1

您可以使用自定义画家来执行此操作，但是我知道将每个颜色棒的动画动画都是具有挑战性的。我已经能够创建类似您需要的东西

我使用夹板窗口小部件切出底部的底部和正方形的底部右部分 - ＆gt;半圆。

每个颜色栏都是一个容器，由于您想为每个栏进行动画操作，因此您可以轻松地用AnimatedContainer替换容器，然后从那里继续进行。您可能还需要使动画的窗口小部件陈述。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Assuming constraints here. 
    // Play with width and height values 
    const double widgetWidth = 100;
    const double widgetHeight = 60;
    // To get a semicircle
     const double bottomRadius = widgetWidth / 2;
    //Since we have 5 colors . Each color bars height is 60/5 = 12
    const double colorBarHeight = widgetHeight / 5;

return ClipRRect(
    borderRadius: const BorderRadius.only(
        bottomLeft: Radius.circular(bottomRadius),
        bottomRight: Radius.circular(bottomRadius)),
    child: SizedBox(
        width: widgetWidth,
        height: widgetHeight,
        child: Column(
          children: [
          Container(
              width: widgetWidth,height: colorBarHeight,color: Colors.green),
          Container(
              width: widgetWidth,height: colorBarHeight,color: Colors.orange),
          Container(
              width: widgetWidth,height: colorBarHeight,color: Colors.yellow),
          Container(
              width: widgetWidth, height: colorBarHeight, color: Colors.red),
          Container(
              width: widgetWidth, height: colorBarHeight, color: Colors.blue),
        ])));

}
}

Answer 2

请尝试以下代码：

class SemiCircle extends StatelessWidget {
  const SemiCircle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(300),
                bottomRight: Radius.circular(300),
              ),
              child: Container(
                alignment: Alignment.center,
                height: 100,
                width: 200,
                child: Column(
                  children: [
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您将获得如下：