草庐IT

dart - Flutter - 在容器中心变换比例

coder 2023-05-09 原文

我正在尝试创建翻转效果，但在开始动画之前，我试图让变换保持在容器的中心。

但即使使用 FractionalOffset(0.5, 0.5) 或 Center() 包装 Transform() 结果仍然在 Container，如下图。

你能帮我把它放在容器中央吗？

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              alignment: new FractionalOffset(0.5, 0.5),
              height: 144.0,
              width: 360.0,
              decoration: new BoxDecoration(
                border: new Border.all(color: new Color(0xFF9E9E9E))
              ),
              child: new Transform(
                transform: new Matrix4.identity()..scale(1.0, 0.05),   
                  child: new Container(
                  decoration: new BoxDecoration(
                    color: new Color(0xFF005CA9),        
                  ),        
                ), 
              )         
            )         
          ],
        ),
      ),
    );
  }
}

最佳答案

Transform不会影响其子元素的布局，只会影响子元素的绘制方式。

如果您想使用 Transform 进行缩放，您可以传递 alignment: FractionalOffset.center。

如果您想使用布局图元将项目居中，您可以使用 FractionallySizedBox而不是 变换。

有关如何制作翻转效果动画的完整示例，请参阅我对 your other question 的回答。 .

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              alignment: new FractionalOffset(0.5, 0.5),
              height: 144.0,
              width: 360.0,
              decoration: new BoxDecoration(
                border: new Border.all(color: new Color(0xFF9E9E9E))
              ),
              child: new Transform(
                alignment: FractionalOffset.center,
                transform: new Matrix4.identity()..scale(1.0, 0.05),
                child: new Container(
                  decoration: new BoxDecoration(
                    color: new Color(0xFF005CA9),
                  ),
                ),
              )
            )
          ],
        ),
      ),
    );
  }
}

关于dart - Flutter - 在容器中心变换比例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44989140/

容器Flutternewcodesectiondart

有关dart - Flutter - 在容器中心变换比例的更多相关文章

  1. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：        变量名：FLUTTER_STORAGE_BASE_URL      变量值：https://storage.flutter-io.cn        变量名：PUB_HOSTED_URL      变量

  2. ruby-on-rails - 使用 geokit 或其他 ruby​​ gem 计算一系列地理坐标的中心 - 2

    我使用geokit和geokit-railsgemforrails有一段时间了，但我还没有找到答案的一个问题是如何找到一组点的计算聚合中心。我知道如何计算两点之间的距离，但不会超过2。我的理由是，我在同一个城市中有一系列的点……一切都完美的城市会有一个我可以使用的中心，但有些城市，比如柏林没有一个完美的中心。他们有多个中心，我只想使用我数据库中的所有地点列表来计算特定分布的中心。还有其他人遇到过这个问题吗？有什么建议吗？谢谢 最佳答案 之前从未使用过Geokit，这个操作背后的数学原理相对容易自己实现。假设这些点由纬度和经度组成，您

  3. 有仰拍相机和俯拍相机时，俯拍相机中心和吸嘴中心的标定 - 2

    俯拍相机中心和吸嘴中心的标定文章目录俯拍相机中心和吸嘴中心的标定前言适用模型如下：一、使用一个标定片进行标定1.关键注意：2.标定步骤：二、使用一个L型的工件1.关键注意：2.标定步骤：总结前言在自动化设备领域，使用相机进行定位是很普遍存在的，而使用相机定位就必定会用到标定，本文介绍两种关于吸嘴上方的俯拍相机和吸嘴中心的标定方法（前提是带有仰拍相机和俯拍相机）。【还有很多相机的使用场景的标定方法将在以后的文章中进行阐述】适用模型如下：一、使用一个标定片进行标定1.关键注意：关键是使用两个相机的中心和识别偏差，得到两个相机的中心固定偏差。注：后续俯拍相机拍物料识别得到的偏差以吸嘴中心在俯拍相机中

  4. ruby - 从文件中提取快速傅里叶变换数据 - 2

    我正在构建一个应该在服务器上运行并分析声音文件的工具。我想在Ruby中执行此操作，因为我的所有其他工具也是用Ruby编写的。但我很难找到完成此任务的好方法。我发现的很多例子都是在做可视化和图形化的东西。我只需要FFT数据，仅此而已。我既需要获取音频数据，又需要对其进行FFT。我的最终目标是计算一些东西，例如所有频率(加权幅度)的均值/中值/众数、第25个百分位数和第75个百分位数、BPM，也许还有其他一些好的特性，以便以后能够将相似的声音聚集在一起.首先，我尝试使用ruby-audio和fftw3，但我从未将两者真正结合使用。文档也不好，所以我真的不知道有什么数据被洗牌了。接下来，我尝

  5. 图形学-变换(平移矩阵，旋转矩阵，缩放矩阵，线性变换，仿射变换，齐次坐标) - 2

    1.变换1.1什么是变换?变换（Transform）是计算机图形学中非常重要的一部分。变换包含模型变换（Modelingtransform）以及视图变换（Viewtransform）。模型变换指的是变换模型（被拍摄物体）的位置，大小和角度；视图变换指的是变换照相机的位置和角度。从相对运动的角度来看，两种变换是可以相互转化的。1.2模型变换1.2.1二维变换缩放变换缩放变换（Scale）中，如果一个图片以原点(0,0)为中心缩放𝑠倍。那么点(𝑥,𝑦)变换后数学形式可以表示为写成矩阵形式为：当然，我们也可以给x轴和y轴不同的缩放倍数𝑠𝑥和𝑠𝑦。在非均匀情况下，缩放变换的矩阵形式为反射变换反射变换（

  6. ruby - Selenium 滚动元素进入(中心) View - 2

    当一个元素在selenium的View之外并且试图与之交互时，selenium通常会首先隐式地将元素滚动到View中。这很棒，只是烦人的是它通常将元素放入View中。我的意思是，如果元素位于窗口下方，它会向下滚动足够多直到元素刚好与窗口边缘接壤。通常这很好，但是当在周围有边框的网站上工作时，这将导致许多此类错误Selenium::WebDriver::Error::UnknownError:unknownerror:Elementisnotclickableatpoint(438,747).Otherelementwouldreceivetheclick:...因为通常网页的边框都在它

  7. 在保持文本不透明度的同时，可以使用仅使用HTML制作一个透明的容器？ - 2

    我想在保持文本/图像不透明的同时使我的容器背景透明。只能使用HTML做到这一点吗？这是我的代码：看答案我看到了您的问题，如果我正确理解您，我想我知道您可以做什么。我注意到的一件事是，在我进一步走之前，看起来您正在使用引导程序代码。如果您更改了可能与此相关的CSS样式表，则可能会更好，更有效，也可能不会破坏整体代码的其他元素，但是让我们看看我的解决方案是否对您有效。基本上您想做的是：1）在您的HTML中编写一个“样式”标签，然后在其中放入样式（CSS）属性（您可以将其放入HTML代码的标题中以更好地跟踪它）。2）使用提供背景颜色的“RGBA”格式，并将其不透明度为“0”作为代码段的第四值。因此，

  8. ruby-on-rails - 使用 AWS Elastic Beanstalk 和 Ruby 容器设置私有(private) Github 访问 - 2

    经过recenttutorial关于使用Git为Ruby部署设置AWSElasticBeanstalk，我只是从我的CI服务器设置了一个ElasticBeanstalk环境。但是，应用程序无法启动。我查看日志发现bundleinstall失败并显示一条错误消息。Fetchinggit@github.com:example/private-repository.gitHostkeyverificationfailed.fatal:Theremoteendhungupunexpectedly[31mGiterror:commandgitclone'git@github.com:exampl

  9. vue2+element-ui,el-aside侧边栏容器收缩与展开 - 2

    一、概览实现效果如下：二、项目环境1、nodejs版本node-vv16.16.02、npm版本npm-vnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location=global`instead.8.15.03、vue脚手架版本vue-V@vue/cli5.0.8三、创建vue项目1、创建名为vuetest的项目vuecreatevuetest选择Default（[Vue2]babel,eslint）  2、切换到项目目录，启动项目cdvuetestnpmrunserve 3、使用浏览器预览 http://localh

  10. ruby - Ruby 有像栈、队列、链表、映射或集合这样的容器吗？ - 2

    我在网上查了几个Ruby教程，他们似乎什么都用数组。那么如何在Ruby中实现以下数据结构呢？堆栈队列链表map组 最佳答案 (从评论中移出)好吧，通过限制堆栈或队列方法(push、pop、shift、unshift)，数组可以是堆栈或队列。使用push/pop提供LIFO(后进先出)行为(堆栈)，而使用push/shift或unshift/pop提供FIFO行为(队列)。map是hashes,和一个Set类已经存在。您可以使用类实现链表，但数组将使用标准数组方法提供类似于链表的行为。 关

随机推荐