如何在 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
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );