Flutter中如何实现页面底部Padding组件延迟10秒显示的功能？

你只需要做3处修改即可实现延迟10秒显示底部Padding区域的需求：

1. 新增状态控制变量 #

在_StartPageState类中新增控制底部区域显示状态的布尔值：

bool _showBottomSection = false;

2. 新增初始化延迟逻辑 #

重写initState生命周期方法，加入10秒延迟更新状态的逻辑，额外增加mounted判断避免页面销毁后调用setState触发异常：

@override
void initState() {
  super.initState();
  Future.delayed(const Duration(seconds: 10), () {
    if (mounted) {
      setState(() {
        _showBottomSection = true;
      });
    }
  });
}

3. 修改底部Padding的渲染逻辑 #

将原代码中最底部的Padding组件用状态变量控制显示即可：

// 原底部Padding代码用if判断包裹
if (_showBottomSection)
  Padding(
    padding: const EdgeInsets.all(13.0),
    child: Container(
      color: Colors.white,
      width: double.infinity,
      child: Column(
        children: [
          SizedBox(
            height: 10,
          ),
          buildRow(value, true),
          buildRow(shortUrl, false),
        ],
      ),
    ),
  )

可选优化：增加淡入过渡效果 #

如果想要显示过程更自然，可以用AnimatedOpacity替代if判断，加入淡入动画：

AnimatedOpacity(
  opacity: _showBottomSection ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 300),
  child: Padding(
    // 原Padding代码完全不变
    padding: const EdgeInsets.all(13.0),
    child: Container(
      color: Colors.white,
      width: double.infinity,
      child: Column(
        children: [
          SizedBox(
            height: 10,
          ),
          buildRow(value, true),
          buildRow(shortUrl, false),
        ],
      ),
    ),
  ),
)

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