有没有办法在Flutter上将容器的背景画成两半？

Question

我知道我可以使用渐变，但是这两个渐变选项都不适合我，因为我需要填充容器的背景作为进度条。我可以使用 CustomPainter，但根据设计容器有一个边框半径，我不知道如何使用 CustomPainter 制作边框半径。有什么想法可以做到这一点吗？

Answer 1

一种方法是使用 Stack 小部件

MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Some Stuff"),
        ),
        body: Stack(
          children: <Widget>[
            Container(
              height: 100.0,
              width: 300.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.grey,
              ),
            ),
            Container(
              height: 100.0,
              width: 100.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );

Answer 2

当您构建组件时，您可以使用媒体查询访问屏幕宽度和高度，将其除以您想要的任何数字，然后将其作为参数传递给您的容器。

Containter(
   width: MediaQuery.of(context).size.width/2,
   height: MediaQuery.of(context).size.height/2,
)

如果想动态化，可以用变量代替数字，根据这个变量的变化重绘。

有没有办法在Flutter上将容器的背景画成两半？

Is there a way to sketch the background of the container in half on Flutter?

flutter

flutter-layout

flutter-animation