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

如何在Flutter中实现从顶部中心到底部中心的垂直线性渐变?

实现Flutter垂直线性渐变的修改方案
  • 问题核心:你当前代码里的end: Alignment(0.9, 0.1)设置了斜向的结束偏移点,导致渐变方向呈斜向。要实现顶部中心到底部中心的垂直渐变,只需将结束对齐方式改为Alignment.bottomCenter即可。

修改后的完整代码:

Container(
  height: 550,
  width: 550,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter, // 修改为底部中心对齐
      colors: [opFireOrange, fireOrange]
    ),
    borderRadius: BorderRadius.all(Radius.circular(6.0)),
  ),
),
  • 补充说明:Alignment.topCenter对应坐标为(0, 0),Alignment.bottomCenter对应坐标为(0, 1),两者的X轴坐标一致,渐变会严格沿着垂直方向从上到下过渡,完全匹配你需要的效果。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.02 05:10:23