Flutter——AspectRatio组件

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio 最终将会去优先适应布局限制条件,而忽略所设置的比率。

AspectRatio组件常用的属性:

属性 说明
aspectRatio
宽高比,最终可能不会根据这个值去布局,具体则要看综合因素,外层是否允许按照这种比率进行布局,这只是一个参考值。
child 子组件

import ‘package:flutter/material.dart‘;

void main() {
  runApp(MaterialApp(
    title: "AspectRatioWidget",
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        color: Colors.redAccent,
        child: AspectRatio(
          aspectRatio: 2.0/1.0,
          child: Container(
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

原文地址:https://www.cnblogs.com/chichung/p/11994046.html

时间: 2024-11-02 23:13:04

Flutter——AspectRatio组件的相关文章

flutter 输入框组件封装

一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何控制输入框的回调函数 二.快速创建自定义组件 vscode中使用快捷键stl快速生成一个无状态组件, class CreateMyInput extends StatelessWidget { @override Widget build(BuildContext context) { return Container( );

flutter 图片组件

加入图片的几种方式 Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径. Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址. Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关. Image.memory: 加载Uint8List资源图片,不怎么使用 Image 组件的常用属性: fit属性的设置 fit属性可以控制图片的拉伸

flutter常用组件

TextWidget  文本组件 TextWidget  的常用属性 TextAlign: 下面的五种对齐方式 左对齐, 右对齐, 居中对齐, 从开始位置对齐 MaxLines: 显示几行 overflow: 超出范围截取后的样式 clip 直接阶段, ellipsis 后面省略号... fade 超出后渐变, decoration : underline 下划线 linethrough 中间穿过 none 不显示 overline 上划线 decorationStye: 下划线样式 dashe

Flutter——Expanded组件("可伸缩"组件)

Expanded组件可以结合Row和Column布局组件使用. Expanded组件的常用属性 属性 说明 flex 元素占整个父Row/Column的比例 child 子元素 import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: "ExpandedWidget", home: MyApp(), )); } class MyApp extends StatelessWidget

Flutter——CircleAvatar组件(圆形头像组件)

import 'package:flutter/material.dart'; import 'res/listData.dart'; void main() { runApp(MaterialApp( title: "demo", home: MyApp(), )); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBa

Flutter——AppBar组件(顶部导航组件)

AppBar组件的常用属性如下: 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题文字,可以放组件 actions 通常使用 IconButton 来表示,可以放按钮组 bottom 通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTitle 标题是否居中显示 i

Flutter——TabBar组件(顶部Tab切换组件)

TabBar组件的常用属性: 属性 描述 tabs 显示的标签内容,一般使用 Tab 对象,也可以是其他的Widget  controller TabController 对象 isScrollable 是否可滚动 indicatorColor 指示器颜色 indicatorWeight 指示器高度 indicatorPadding 底部指示器的 Padding indicator 指示器 decoration,例如边框等 indicatorSize 指示器大小计算方式,TabBarIndica

Flutter 基础组件:Widget简介

概念 在Flutter中几乎所有的对象都是一个Widget.与原生开发中"控件"不同的是,Flutter中的Widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的组件如:用于手势检测的 GestureDetector widget.用于APP主题数据传递的Theme等等,而原生开发中的控件通常只是指UI元素. Widget与Element 在Flutter中,Widget的功能是"描述一个UI元素的配置数据",它就是说,Widget其实并不是表示最

Flutter 基础组件:文本、字体样式

// 文本.字体样式 import 'package:flutter/material.dart'; class TextFontStyle extends StatelessWidget { // 声明文本样式 TextStyle textStyle = const TextStyle(fontFamily: 'MyFont', fontSize: 30, ); @override Widget build(BuildContext context) { return Scaffold( ap