Flutter：如何制作自定义的 flutter 容器？

Question

我想自定义 container/card 看起来像：

如何在 flutter 中实现 overlapping/overlaying 布局？

Answer 1

使用 Stack 小部件和 Positioned 小部件，这有助于将小部件放在堆栈中您想要的任何位置

Answer 2

代码：

Container(
  width: 135.0,
  height: 80.0,
  margin: EdgeInsets.only(right: 5.0),
  child: Stack(
    children: [
      Align(
        alignment: Alignment.centerLeft,
        child: Container(
          width: 110.0,
          height: 150.0,
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.all(Radius.circular(20.0)),
          ),
          child: Align(
            alignment: Alignment.bottomLeft,
            child: Padding(
              padding: EdgeInsets.only(left: 15.0, bottom: 20.0),
              child: Text(
                text,
                style: TextStyle(
                  fontSize: 15.0,
                  fontFamily: 'PlayfairDisplay',
                  color: kInactiveSearchPageTextColor,
                ),
              ),
            ),
          ),
        ),
      ),
      Align(
        alignment: Alignment.topLeft,
        child: Image.asset(
          image,
          width: 110,
          height: 110,
        ),
      ),
      Positioned(
        top: 162,
        left: 90,
        child: Container(
          width: 41.0,
          height: 41.0,
          child: RawMaterialButton(
            fillColor: Colors.white,
            shape: CircleBorder(),
            elevation: 12.0,
            child: Icon(
              Icons.add,
              color: kActiveSearchPageButtonColor,
            ),
            onPressed: onPressed,
          ),
        ),
      ),
    ],
  ),
);