Flutter使用Hero组件页面切换时显示原始文本的问题及解决咨询

问题核心原因 #

1. Hero子组件结构不匹配：源页面（CrawDevideWidget）的Hero直接包裹Text，但目标页面（hadalaRoute）的Hero内部嵌套了Expanded组件，结构不一致导致转场时框架无法正确处理组件过渡，出现原始文本残留。
2. 文本样式不一致：源页面和目标页面的Text样式存在差异，转场时的样式突变会加剧视觉上的不流畅感。

针对性解决方案 #

1. 统一Hero子组件结构 #

确保源页面和目标页面的Hero子组件结构完全一致，将目标页面中Hero内部的Expanded移到Hero外部：

修改hadalaRoute的AppBar部分：

AppBar(
  title: Row(
    children: [
      Expanded(
        child: Hero(tag:"hadala",child: const Text('කපුටන් හැඩලීම')),
      ),
    ],
  ),
)

修改wasuruRoute的AppBar部分（保持结构统一）：

AppBar(
  title: Row(
    children: [
      Expanded(
        child: Hero(tag:"wasuru",child: const Text('කපුටන් වසුරුකිරීම')),
      ),
    ],
  ),
)

2. 统一文本样式 #

将源页面和目标页面的Text样式保持一致，避免转场时的样式突变：

先定义全局可复用的样式常量：

const heroTextStyle = TextStyle(fontSize:50, color: Colors.white70);

修改CrawDevideWidget中的Hero文本：

Hero(
  tag: tagTextCrawDevide,
  child: Text(lableText, style: heroTextStyle),
)

修改目标页面的Text样式：

Hero(
  tag:"hadala",
  child: const Text('කපුටන් හැඩලීම', style: heroTextStyle),
)

3. 优化导航逻辑（可选） #

如果转场仍有异常，可尝试启用全屏对话框模式，优化转场动画的处理逻辑：

// 修改CrawDevideWidget中的导航代码
onPressed: (){
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => route,
      fullscreenDialog: true,
    ),
  );
},

修改后的完整代码示例 #

// 定义全局可复用的Hero文本样式
const heroTextStyle = TextStyle(fontSize:50, color: Colors.white70);

class CrawRoute extends StatelessWidget {
  const CrawRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Row(
          children: [
            Hero(tag: "craw", child: Image.asset(height: 60,width:50,fit:BoxFit.cover,'assets/images/craw.png')),
            const Text('කපුටු හැඩලීම හා වසුරුකිරීම'),
          ],
        ),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            SizedBox(height: 50,),
            CrawDevideWidget(lableText: "කපුටන් හැඩලීම",tagTextCrawDevide: "hadala",route: hadalaRoute(),),
            SizedBox(height: 50,),
            CrawDevideWidget(lableText: "කපුටන් වසුරුකිරීම",tagTextCrawDevide: "wasuru",route: wasuruRoute(),),
            SizedBox(height: 50,),
          ],
        ),
      ),
    );
  }
}

class CrawDevideWidget extends StatelessWidget {
  const CrawDevideWidget({
    required this.lableText,
    required this.tagTextCrawDevide,
    required this.route,
    super.key,
  });
  final String lableText;
  final String tagTextCrawDevide;
  final Widget route;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28))),
        onPressed: (){
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => route,
              fullscreenDialog: true,
            ),
          );
        }, 
        child: Hero(
          tag:tagTextCrawDevide,
          child: Text(lableText,style: heroTextStyle,)
        )
      ),
    );
  }
}

class wasuruRoute extends StatelessWidget {
  const wasuruRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            Expanded(
              child: Hero(tag:"wasuru",child: const Text('කපුටන් වසුරුකිරීම', style: heroTextStyle)),
            ),
          ],
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context) ;
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

class hadalaRoute extends StatelessWidget {
  const hadalaRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            Expanded(
              child: Hero(tag:"hadala",child: const Text('කපුටන් හැඩලීම', style: heroTextStyle)),
            ),
          ],
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context) ;
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

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