Блог

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

Как повернуть изображение размером больше экрана без обрезки переполнения в Flutter?

#flutter

#флаттер

Вопрос:

У меня есть это изображение, которое я хотел бы отобразить на весь экран и повернуть в фоновом режиме:

Фоновое изображение

Здесь он правильно заполняет экран: изображение правильно заполняет экран

Проблема в том, что при его вращении обрезаются стороны: введите описание изображения здесь

Я перепробовал все типы подгонки по размеру. Я попытался увеличить ширину контейнера до double.infinity. Я попытался обернуть изображение в SingleChildScrollView. Я попытался поместить overflow: Overflow.visible в стек. Весь день пробовал, но, похоже, ничего не работает.

Изображение должно непрерывно заполнять экран при вращении. Как я могу закодировать его так, чтобы края не обрезались?

Вот мой код:

 class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: <Widget>[
            SpinPerfect(
              infinite: true,
              duration: Duration(seconds: 10),
              child: Image.asset(
                'assets/images/star-burst.png',
                fit: BoxFit.none,
              ),
            ),
            Container(
              child: Center(
                child: Text('This is Screen 1'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Примечание: в настоящее время я поворачиваю его с помощью SpinPerfect из пакета animate_do, но та же проблема с обрезкой возникает при использовании Transform.rotate.

Заранее спасибо за любое направление!

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

1. Overflow.visible работает просто отлично — это ваш SpinPerfect , который обрезает дочерний элемент

2. Хммм — я заменил SpinPerfect на AnimatedBuilder, но он также обрезается. Спасибо за ответ. Знаете ли вы что-нибудь, что я могу использовать для вращения фонового изображения, которое не будет его обрезать?

3. child: Stack( alignment: Alignment.center, children: [ Container(color: Colors.grey), Transform.rotate( angle: math.pi / 4, child: Image.asset('images/bg.jpg'), ), ], ), — у вас это не работает?

4. Да, к сожалению, он по-прежнему обрезает края. imgur.com/a/6fVhJDi

Ответ №1:

Вот решение, которое работает очень хорошо:

Используйте SpinPerfect из пакета animate_do (https://pub.dev/packages/animate_do ) в сочетании с пакетом photo_view (https://pub.dev/packages/photo_view ).

 SpinPerfect(
  infinite: true,
  spins: 1,
  duration: Duration(seconds: 60),
  child: PhotoView(
    disableGestures: true,
    backgroundDecoration: BoxDecoration(color: Colors.transparent),
    initialScale: PhotoViewComputedScale.covered * 2.7,
    imageProvider: AssetImage('assets/images/background.jpg'),
  ),
)

Спасибо создателю пакета animate_do за идею. (Очень крутой чувак!)