Блог

Главная - Вопросы по программированию - Как частично отобразить изображение в flutter, чтобы получить эффект поднятия занавеса?

Как частично отобразить изображение в flutter, чтобы получить эффект поднятия занавеса?

#flutter #flutter-layout #flutter-animation

#flutter #flutter-layout #flutter-анимация

Вопрос:

Я хочу отобразить изображение в flutter таким образом, чтобы оно давало эффект анимации поднятия занавеса на основе значений ползунка.

Например, я показываю IMAGE.jpg который имеет фиксированную высоту и ширину в приложении flutter.

Ползунок имеет диапазон от 0 до 10.

  • Когда 0: значение ползунка равно 0, область расположения изображения отображается на 100% черной.

  • Когда отображается 1: нижние 10%, а верхние 90% черные

  • Когда отображается 2: нижние 20%, а верхние 80% черные

и аналогично

  • При отображении 10: 100%

Как можно создать этот эффект?

Комментарии:

1. Всем привет! Добро пожаловать в SO. Пожалуйста, обновите вопрос, поделившись частью вашего кода, который облегчил бы сообществу SO ответ на ваш вопрос. Приветствия!

2. Вы можете либо обрезать изображение, либо показать другой виджет поверх него, используя стек, который частично скрывает виджет ниже.

Ответ №1:

Для создания этого эффекта занавеса вы можете использовать виджеты Slider и Align. Вы можете heightFactor внутри Align класса настроить создание эффекта процентной завесы. Теперь внутри 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'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}