如何使Positioned类型的DottedBorder组件居中并铺满页面，且内部文本左对齐？

要实现DottedBorder精准居中、铺满页面宽度且内部文本左对齐，你需要调整布局结构，移除硬编码的内边距，改用自适应的布局组件：

关键改动点 #

• 用SizedBox(width: double.infinity)包裹DottedBorder，确保它铺满页面水平宽度，避免硬编码宽度/内边距带来的适配问题。
• 替换固定数值的内边距为对称padding（如EdgeInsets.all(16.0)），按需调整内边距大小即可。
• 将内部Column的crossAxisAlignment从CrossAxisAlignment.end改为CrossAxisAlignment.start，实现文本左对齐。
• 若需要边框垂直居中，给外层Column添加mainAxisAlignment: MainAxisAlignment.center。

修改后的完整代码 #

Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center, // 可选：让边框垂直居中
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      SizedBox(
        width: double.infinity, // 铺满页面水平宽度
        child: DottedBorder(
          borderType: BorderType.RRect,
          color: Colors.black,
          strokeWidth: 3,
          dashPattern: [10, 6],
          radius: const Radius.elliptical(10.0, 10.0),
          child: Padding(
            padding: const EdgeInsets.all(16.0), // 对称内边距，可按需调整
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, // 文本左对齐
              children: const <Widget>[
                Text(
                  "Welcome!",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者mikwee