flutter布局

作者: iOS小洁 | 来源:发表于2022-12-22 22:55 被阅读0次

Row , Column , Stack 主轴方向

横向 纵向 层叠

mainAxisAlignment

关于主轴:

  • spaceBetween 剩下的空间平均分布到小部件之间
  • spaceAround 剩下的空间平均分布到小部件的周围
  • spaceEvenly 剩下的空间和小部件一起平均分布

magin

margin: EdgeInsets.all(10), 全部设为10

padding

padding: EdgeInsets.only(left: 30,right: 10,top: 10,bottom: 10),

Positioned 绝对布局

Positioned(right: 0, child:<>)
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,

屏幕宽高

double ScreenWidth(BuildContext context) => MediaQuery.of(context).size.width;
double ScreenHeight(BuildContext context) => MediaQuery.of(context).size.height;

alignment

alignment: Alignment(0.0, 0.0), //x,y
取值范围 -1 到 1。 (0,0) 为中心

AspectRatio

AspectRatio(
aspectRatio: 2 / 1, //宽高比例
child: Icon(
Icons.add,
size: 40,
)),
),

Expanded

比例布局
Expanded(flex: 1, child:<>)

绝对布局

height

width

流布局

横、竖、层叠

相关文章

  • Flutter 布局

    Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Pa...

  • Flutter-布局

    一、介绍 flutter布局需要先了解flutter所有布局的widget,首先flutter布局分为Contai...

  • Flutter-汇总

    Flutter(一)--Flutter安装遇到的问题汇总 Flutter(二)--布局机制、布局步骤、水平和垂直布...

  • Flutter旋转位移等操作

    flutter布局-5-Matrix4矩阵变换Flutter 布局(六)- SizedOverflowBox、Tr...

  • flutter布局-3-center

    Center 居中的布局 连载:flutter布局-1-column连载:flutter布局-2-row 只能有一...

  • Flutter及Dart入门

    目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面 路...

  • flutter(六,页面布局篇)

    Tags: flutter Flutter页面布局篇 [TOC] 1. 布局及装饰组件说明 2. 基础布局处理 2...

  • 2019-04-15 Flutter 布局方式

    1:Flutter 的 布局 1.1概述: 1.2总体 flutter 中的布局 是以原子布局实体为填充物,根据行...

  • flutter布局-4-container

    Container 容器 连载:flutter布局-1-column连载:flutter布局-2-row连载:fl...

  • flutter Cannot provide both a co

    flutter布局错误'package:flutter/src/widgets/container .dart' ...

网友评论

    本文标题:flutter布局

    本文链接:https://www.haomeiwen.com/subject/wsfvqdtx.html