如何部分显示抖动图像以获得窗帘效果?

时间:2019-03-17 19:11:36

标签: flutter flutter-layout flutter-animation

我希望以抖动的方式显示图像,从而使图像具有基于滑块值的帘幕动画效果。

例如,我正在Flutter应用上显示具有固定高度和宽度的IMAGE.jpg。

滑块的范围是0到10。

  • 当0:滑块值为0时,图像布局区域显示为100%黑色。

  • 当1:显示底部10%,顶部90%为黑色

  • 当2:显示底部20%,顶部80%为黑色

类似

  • 显示10:100%时

如何创建这种效果?

1 个答案:

答案 0 :(得分:1)

要创建此幕布效果,可以使用SliderAlign小部件。您可以在heightFactor类中设置Align来创建百分比幕布效果。现在,您可以在Slider小部件内设置heightFactor的值以创建幕布效果。

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

Slider Curtain Demo

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'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}