来自Flutter组件库

ModalBarrier的动画版本，一个可以防止用户与它后面的控件进行交互的蒙层，并且可以配置动画颜色值。

描述

ModalBarrier是路由后面呈现的遮罩，通常会阻止用户与当前路由以下的路由进行交互，并且通常会部分遮挡这些路由。

例如，当对话框出现在屏幕上时，通常会有一个遮罩将屏幕下方的页面变暗。

这个小部件与ModalBarrier类似，不同的是它使用的是动态颜色而不是单一颜色。

主要属性

AnimatedModalBarrier({Key? key, required Animation<Color?> color, bool dismissible = true, String? semanticsLabel, bool? barrierSemanticsDismissible, VoidCallback? onDismiss, ValueNotifier<EdgeInsets>? clipDetailsNotifier, String? semanticsOnTapHint})

• Color：遮罩的颜色，是一个AnimatedColor

• dismissble：点击遮罩是否自动从路由栈里移除

• onDismiss：移除后触发的方法

示例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedModalBarrier Demo'),
        ),
        body: const HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

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

class HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin{
  bool _showModalBarrier = false;
  late Animation<Color?> _animation;
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _animation = ColorTween(
      begin: Colors.transparent,
      end: Colors.black.withOpacity(0.5),
    ).animate(_controller);
  }

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

  _startAnimation() {
    setState(() => _showModalBarrier = true);
    _controller.forward();
  }

  _stopAnimation() {
    _controller.reverse().whenComplete(()=>setState(() => _showModalBarrier = false));
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Center(
          child: ElevatedButton(
            onPressed: _startAnimation,
            child: const Text('Show Modal Barrier'),
          ),
        ),
        if (_showModalBarrier)
          AnimatedModalBarrier(
            color: _animation,
            dismissible: true,
            onDismiss: _stopAnimation,
          ),
      ],
    );
  }
}

这个示例展示了一个按钮，点击后显示遮罩，其颜色在2秒钟内由透明渐变为black50，点击背景后动画反转，遮罩消失。