Flutter中FadeTransition与IndexedStack导致ListView背景残留问题求助

问题描述 #

使用FadeTransition、IndexedStack和BottomNavigationBar实现标签页导航时，切换标签会出现page2的ListView作为page1、page3背景的问题（加长淡入时长可明显观察到）。

问题原因 #

1. 原FadeIndexedStack将动画作用于整个IndexedStack，切换时新页面从透明逐渐显示，若新页面无不透明背景，会透出下方已加载的其他页面内容。
2. IndexedStack会保留所有子组件的状态，动画过程中新页面的透明状态导致隐藏的页面“显露”。

方案一：给所有页面添加不透明背景色 #

这是最快捷的解决方式，确保每个页面都有不透明背景，阻断下层内容的透出：

修改page3组件 #

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

  @override
  Widget build(BuildContext context) {
    return Container(
      // 使用主题默认背景色，适配深色/浅色模式
      color: Theme.of(context).scaffoldBackgroundColor,
      child: const Text(
        'page 3',
        style: TextStyle(fontSize: 30, color: Colors.red),
      ),
    );
  }
}

修改page2组件 #

class page2 extends StatelessWidget {
  const page2({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).scaffoldBackgroundColor,
      child: ListView(
        children: const [
          ListTile(
            tileColor: Colors.blueAccent,
            title: Text('page 2.1'),
            shape: Border.symmetric(
              horizontal: BorderSide(
                color: Colors.black,
                width: 1.0,
                style: BorderStyle.solid,
              ),
            ),
          ),
          ListTile(
            tileColor: Colors.blueAccent,
            title: Text('page 2.2'),
            shape: Border.symmetric(
              horizontal: BorderSide(
                color: Colors.black,
                width: 1.0,
                style: BorderStyle.solid,
              ),
            ),
          ),
          ListTile(
            tileColor: Colors.blueAccent,
            title: Text('page 2.3'),
            shape: Border.symmetric(
              horizontal: BorderSide(
                color: Colors.black,
                width: 1.0,
                style: BorderStyle.solid,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

方案二：修改FadeIndexedStack实现正确的淡入淡出逻辑 #

原组件仅对整个IndexedStack做淡入，逻辑有误。修改后实现旧页面淡出、新页面淡入的顺序动画，彻底避免内容叠加：

class FadeIndexedStack extends StatefulWidget {
  final int index;
  final List<Widget> children;
  final Duration duration;

  const FadeIndexedStack({
    super.key,
    required this.index,
    required this.children,
    this.duration = const Duration(milliseconds: 300),
  });

  @override
  State<FadeIndexedStack> createState() => _FadeIndexedStackState();
}

class _FadeIndexedStackState extends State<FadeIndexedStack>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late int _previousIndex;

  @override
  void initState() {
    super.initState();
    _previousIndex = widget.index;
    _controller = AnimationController(vsync: this, duration: widget.duration);
    _controller.value = 1.0; // 初始状态完全显示当前页面
  }

  @override
  void didUpdateWidget(FadeIndexedStack oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.index != oldWidget.index) {
      _previousIndex = oldWidget.index;
      // 先让旧页面淡出，完成后再让新页面淡入
      _controller.reverse().then((_) {
        setState(() {});
        _controller.forward();
      });
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 显示旧页面并执行淡出动画
        if (_previousIndex != widget.index)
          FadeTransition(
            opacity: ReverseAnimation(_controller),
            child: widget.children[_previousIndex],
          ),
        // 显示新页面并执行淡入动画
        FadeTransition(
          opacity: _controller,
          child: widget.children[widget.index],
        ),
      ],
    );
  }
}

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