如何在 flutter 中的小部件上覆盖小部件

Question

我需要在 Flutter 中的文本内容上构建一个带有红色圆圈的内容小部件，我该怎么办？

Answer 1

你可以使用stack小部件来做到这一点

return Scaffold(
      body: Center(
        child: Container(
          width: 450,
          height: 200,
          color: Colors.white,
          child: Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: Container(
                  width: 400,
                  height: 150,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius:BorderRadius.circular(20)
                  ),
                ),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    shape: BoxShape.circle
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );