如何将图像部分显示为颤动以获得拉幕效果？答案

【问题标题】：How to display an image partially in flutter to get a curtain-raising effect?如何将图像部分显示为颤动以获得拉幕效果？
【发布时间】：2019-08-08 04:51:56
【问题描述】：

我想以颤动的方式显示图像，以便它根据滑块值产生窗帘升起动画的效果。

例如，我在颤振应用程序上显示具有固定高度和宽度的 IMAGE.jpg。

滑块的范围为 0 到 10。

当 0：滑块值为 0 时，图像布局区域显示 100% 黑色。
1时：显示底部10%，顶部90%为黑色
当 2：显示底部 20%，顶部 80% 为黑色时

类似

当 10:100% 显示时

这种效果是如何产生的？

【问题讨论】：

您好！欢迎来到 SO。请通过共享您的一些代码来更新问题，这将使 SO 社区更容易回答您的问题。干杯！
您可以剪辑图像或使用堆栈在其顶部显示另一个小部件，该堆栈部分隐藏下方的小部件。

标签： flutter flutter-layout flutter-animation

【解决方案1】：

要创建此窗帘效果，您可以使用 Slider 和 Align 小部件。您可以在Align 类中设置heightFactor 以创建百分比窗帘效果。在 Slider 小部件中，您现在可以设置 heightFactor 的值来创建窗帘效果。

这是一个最小的工作示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CurtainScaffold());
  }
}

class CurtainScaffold extends StatefulWidget {
  @override
  _CurtainScaffoldState createState() => _CurtainScaffoldState();
}

class _CurtainScaffoldState extends State<CurtainScaffold> {
  double curtain = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Slider(
              onChanged: (double val) {
                setState(() {
                  this.curtain = val;
                });
              },
              value: curtain,
              min: 0.0,
              max: 1.0,
            ),
            ClipRect(
              child: Align(
                alignment: Alignment.bottomCenter,
                heightFactor: curtain,
                child: Image.network(
                    'https://upload.wikimedia.org/wikipedia/commons/b/bd/Dts_news_bill_gates_wikipedia.JPG'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：