如何在颤动中使容器大于实际屏幕

Posted 2023-02-23

【中文标题】如何在颤动中使容器大于实际屏幕

【英文标题】：How to make a container bigger than the actual screen in flutter

【发布时间】：2020-06-28 10:40:04

【问题描述】：

我正在为我的应用程序编写一个背景小部件。 它由放置在屏幕右下角的八边形组成。 我只想渲染它的四分之一。八边形需要填满，因为我会在添加动画后使其在某些条件下旋转。我的问题在于我不能将它放在屏幕边框之外。我该怎么做？

很抱歉质量不好，但这是我想要实现的目标： Schema

这是我的代码的实际输出： Screen

很抱歉打扰您，感谢您的回答。

这是我的代码：

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lecture/frontend/utils/app-themes.dart';
import 'package:lecture/frontend/utils/screen-bounds.dart';
import 'package:polygon_clipper/polygon_clipper.dart';

class CustomBackground extends Widget 
  final BuildContext context;

  const CustomBackground(this.context);

  @override
  Element createElement() 
    return Container(
        width: ScreenBounds.of(context).widthTimes(2),
        height: ScreenBounds.of(context).heightTimes(2),
        color: AppTheme.currentTheme(context).backgroundColor,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.bottomRight,
              child: SizedBox(
                width: ScreenBounds.of(context).width,
                height: ScreenBounds.of(context).width,
                child: Transform(
                  alignment: FractionalOffset.center, // set transform origin
                  transform: new Matrix4.rotationZ(pi/8), // rotate -10 deg
                  child: ClipPolygon(
                    sides: 8,
                    borderRadius: 10,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(ScreenBounds.of(context).width),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
    ).createElement();
  

ScreenBounds 代码为：

import 'package:flutter/cupertino.dart';
import 'package:lecture/frontend/utils/responsive_ui.dart';

class ScreenBounds 
  final BuildContext context;
  final double width;
  final double height;
  final double aspectRatio;
  final bool isLarge;
  final bool isMedium;

  const ScreenBounds(this.context, this.width, this.height, this.aspectRatio,
      this.isLarge, this.isMedium);

  factory ScreenBounds.of(BuildContext context) 
    double _height = MediaQuery.of(context).size.height;
    double _width = MediaQuery.of(context).size.width;
    double _pixelRatio = MediaQuery.of(context).devicePixelRatio;
    bool _large = ResponsiveWidget.isScreenLarge(_width, _pixelRatio);
    bool _medium = ResponsiveWidget.isScreenMedium(_width, _pixelRatio);

    return ScreenBounds(context, _width, _height, _pixelRatio, _large, _medium);
  

  double widthTimes(double multiplier) 
    return width * multiplier;
  

  double heightTimes(double multiplier) 
    return height * multiplier;
  

  double widthForSizes(
      double largeMultiplier, double mediumMultiplier, double smallMultiplier) 
    return isLarge
        ? widthTimes(largeMultiplier)
        : (isMedium
        ? widthTimes(mediumMultiplier)
        : widthTimes(smallMultiplier));
  

  double heightForSizes(
      double largeMultiplier, double mediumMultiplier, double smallMultiplier) 
    return isLarge
        ? heightTimes(largeMultiplier)
        : (isMedium
            ? heightTimes(mediumMultiplier)
            : heightTimes(smallMultiplier));
  

  double valueForSizes(
      double largeValue, double mediumValue, double smallValue) 
    return isLarge
        ? largeValue
        : (isMedium
        ? mediumValue
        : smallValue);
  

【参考方案1】：

您可能不需要“制作比实际屏幕尺寸更大的容器”...您只需将您的八角形包裹在 FractionalTranslation 中，然后将其翻译到屏幕外

这对你有用吗？

class Page extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        alignment: Alignment.bottomRight,
        child: FractionalTranslation(
          child: Transform.rotate(
            angle: 31.02,
            child: ClipPolygon(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.orange,
              ),
              sides: 8,
              borderRadius: 5,
             ),
          ),
          translation: Offset(0.5, 0.5),
        ),
      ),
    );
  

输出：

【讨论】：

是的！非常感谢，太完美了