有什么具体原因导致在 iOS 模拟器上 flutter 动画改变不透明度不起作用，而在 Android 上却工作得很好？

Question

我有一个小应用程序，其中屏幕顶部有一些容器，其中有一个图标。当我按下它时，屏幕其余部分的不透明度会发生变化，但仅限于 Android 平台。在 iOS 上，只有当我仅更改脚手架主体的不透明度，而不是整个屏幕本身的不透明度时，它才起作用（我只谈论 AnimatedOpacity 或使用 AnimationController 更改不透明度）。下面是我的代码，我需要一些帮助，或者解决问题的方法。 这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toggle Container App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  double containerHeight = 300;
  late AnimationController _animationController;
  bool isDarkened = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
  }

  void _toggleDarkness() {
    setState(() {
      if (isDarkened) {
        _animationController.reverse();
      } else {
        _animationController.forward();
      }
      isDarkened = !isDarkened;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: [
          Scaffold(
            appBar: AppBar(title: const Text('Toggle Container App')),
            body: Container(color: Colors.white),
          ),
          IgnorePointer(
            child: FadeTransition(
              opacity:
                  Tween(begin: 0.0, end: 0.7).animate(_animationController),
              child: Container(
                color: Colors.black,
                width: double.infinity,
                height: double.infinity,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
                color: Colors.lightBlueAccent,
                height: 300,
                child: const Center(child: Text("Container Content"))),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: MaterialButton(
              onPressed: _toggleDarkness,
              child:
                  Icon(isDarkened ? Icons.lightbulb_outline : Icons.lightbulb),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

我不完全理解你的意思，但从我猜测你的意思来看，尝试使 IgnorePointer 小部件成为堆栈中的最后一个东西，如下所示：

       Stack(
        children: [
          Scaffold(
            appBar: AppBar(title: const Text('Toggle Container App')),
            body: Container(color: Colors.white),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
                color: Colors.lightBlueAccent,
                height: 300,
                child: const Center(child: Text("Container Content"))),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: MaterialButton(
              onPressed: _toggleDarkness,
              child:
                  Icon(isDarkened ? Icons.lightbulb_outline : Icons.lightbulb),
            ),
          ),

          //move the ignorepointer here
          IgnorePointer(
            child: FadeTransition(
              opacity:
                  Tween(begin: 0.0, end: 0.7).animate(_animationController),
              child: Container(
                color: Colors.black,
                width: double.infinity,
                height: double.infinity,
              ),
            ),
          ),
        ],
      ),