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

在构建组件时，可以使用媒体查询访问屏幕的宽度和高度，将其除以所需的任何数字，然后将其作为参数传递给Container。

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

如果要使其动态，可以用变量替换数字并根据该变量的更改重画。

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

2 个答案: