自定義邊框小部件 Flutter

Question

如何制作這樣一個widget，使Row widget在header的中間，並且在容器后面可以有任何與header不相交的顏色？

Answer 1

使用 Stack() 和 Positioned () 小部件來實現這一點。

Answer 2

 SizedBox(
        height: 150,
        width: 400,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 150 - 48 / 2, // remove half title box height
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.amber, width: 5),
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                alignment: Alignment.center,
                color: Colors.grey[50],
                width: 150 / 2,
                height: 48,
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Text("title"),
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("1st item"),
                  SizedBox(
                    height: 10,
                  ), // space between item
                  Text("second item item"),
                ],
              ),
            )
          ],
        ),
      )

了解有關堆棧的更多信息