自定义边框小部件颤振答案

【问题标题】：Custom Border Widget Flutter自定义边框小部件颤振
【发布时间】：2022-01-07 14:44:44
【问题描述】：

如何制作这样一个widget，让Row widget在header中间，而在container后面可以有任何不与header相交的颜色？

【问题讨论】：

标签： flutter user-interface widget border

【解决方案1】：

使用 Stack() 和 Positioned() 小部件来实现这一点。

【讨论】：

整个widget后面可能有图片背景所以颜色猜不出来一定是透明的

【解决方案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"),
                ],
              ),
            )
          ],
        ),
      )

了解更多关于Stack

【讨论】：

整个widget后面可能有图片背景所以颜色猜不出来一定是透明的
一定要注意may be a picture，为此您可以在Stack@ 1st 加入另一个孩子