You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter:如何在文本与蓝色Container间添加内边距?

解决方法

要在蓝色Container和下方文本之间添加间距,只需在Column的两个子Widget之间插入垂直间距组件即可,常用两种实现方式:

方式一:用SizedBox设置固定高度间距

在蓝色Container与下方Center组件之间添加SizedBox(height: 30)(高度值可按需调整):

body: Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
      padding: EdgeInsets.only(left: 25, bottom: 24),
      width: double.infinity,
      decoration: BoxDecoration(
        color: Color.fromARGB(255, 92, 172, 178),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(36),
          bottomRight: Radius.circular(36),
        )
      ),
      child: const Text(
        "Olá, usuário",
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 35,
        ),
      )
    ),
    // 添加垂直间距
    SizedBox(height: 30),
    Center(child: Text(
      "As suas finanças estão:",
      style: TextStyle(
        color: Colors.black,
        fontSize: 18,
      )),
    )
  ],
),

方式二:用Padding给文本添加上内边距

给包裹文本的Center组件套一层Padding,设置top方向的内边距:

body: Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
      padding: EdgeInsets.only(left: 25, bottom: 24),
      width: double.infinity,
      decoration: BoxDecoration(
        color: Color.fromARGB(255, 92, 172, 178),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(36),
          bottomRight: Radius.circular(36),
        )
      ),
      child: const Text(
        "Olá, usuário",
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 35,
        ),
      )
    ),
    Padding(
      padding: EdgeInsets.only(top: 30),
      child: Center(child: Text(
        "As suas finanças estão:",
        style: TextStyle(
          color: Colors.black,
          fontSize: 18,
        )),
      ),
    )
  ],
),

两种方式都能实现你要的效果,调整数值可控制间距大小,按需选择即可。

内容的提问来源于stack exchange,提问作者duda

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 09:20:22