Flutter 页面布局

最新推荐文章于 2024-10-20 22:43:33 发布
最新推荐文章于 2024-10-20 22:43:33 发布
阅读量1.2k 收藏 4
点赞数 3
分类专栏： 07 Flutter 文章标签： Flutter 页面布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongxue8888/article/details/95210930
版权

文章目录

1 布局及装饰组件说明

组件名称中文释义说明
Align对齐布局指定child的对齐方式
AspectRatio调整宽高比根据设置的宽高比调整child组件
BaseLine基准线布局所有的child底部所在的同一水平线
Center居中布局child处于水平和垂直方向的中间位置
Column垂直布局对child在垂直方向进行排列
ConstrainedBox限定宽高限定child的最大值
Container容器布局容器布局是一个组合的Widget，包含定位和尺寸
FittedBox缩放布局缩放以及位置调整
FractionallySizedBox百分比布局根据现有空间按照百分比调整child的尺寸
GridView网格布局对多行多列同时进行操作
IndexedStack栈索引布局IndexedStack继承自Stack，显示第index个child，其他child是不可见的
LimitedBox限定宽高布局对最大宽高进行限制
ListView列表布局用列表方式进行布局，如多项数据的场景
Offstage开关布局控制是否显示组件
OverflowBox溢出父容器显示允许child超出父容器的范围显示
Padding填充布局处理容器和chid之间的间距
Row水平布局对child在水平方向进行排列
SizedBox设置具体尺寸用特定大小的盒子来限定child宽度和高度
Stack/AlignmentAlignment栈布局根据Alignment组件的属性将child定位在Stack组件上
Stack/PositionedPositioned栈布局根据Positioned组件的属性将child定位在Stack组件上
Table表格布局使用表格的行和列进行布局
Transform矩阵转换做矩阵变换，对child做平移、旋转、缩放等操作
Wrap按宽高自动换行按宽度或高度，让child自动换行布局

2 基础布局处理

2.1 Container(容器布局)

Container在Flutter里使用非常多，是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget。

2.2 Center(居中布局)

居中布局，子元素处于水平和垂直方向的中间。

2.3 Padding(填充布局)

用于处理容器和子元素间的间距。

2.4 Align(对齐布局)

将子组件按指定方式对齐，并根据子组件的大小调整自己的大小。

2.5 Row(水平布局)

水平方向是主轴，垂直方向是交叉轴。

2.6 Column(垂直布局)

垂直方向是主轴，水平方向是交叉轴。

2.7 FittedBox(缩放布局)

FittedBox会在自己的尺寸范围内缩放并调整child位置。
两个重要属性：
fit：缩放方式。默认值是BoxFix.contain，即child在FittedBox范围内，尽可能大。contain是在保证child宽高比的前提下，尽可能填满。
alignment：对齐方式。默认值是Alignment.center，居中显示child。

2.8 Stack/Alignment

Stack常用属性

属性名类型默认值说明
alignmentAlignmentGeometryAlignment.topLeft对齐方式

对齐方式有以下几种：

  • bottomCenter 底部居中
  • bottomLeft 底部居左
  • bottomRight 底部居右
  • center 正中
  • centerLeft 中间居左
  • centerRight 中间居右
  • topCenter 顶部居中
  • topLeft 顶部居左
  • topRight 顶部居右

2.9 Stack/Positioned

Positioned组件用来定位的。Stack里使用Positioned布局主要是因为在Stack组件里通常需要定位。

Positioned常用属性

属性名类型说明
topdouble子元素相对顶部边界距离
bottomdouble子元素相对底部边界距离
leftdouble子元素相对左侧边界距离
rightdouble子元素相对右侧边界距离

2.10 IndexedStack

继承自Stack，用于显示第index个child，其他child不可见，所以它的尺寸与child中最大尺寸一致。

2.11 OverFlowBox

允许child超出父容器范围显示。
常用属性

属性名类型说明
alignmentAlignmentGeometry对齐方式
minWidthdouble允许child最小宽度，如果child宽度小于该值，按照最小宽度显示
maxWidthdouble允许child最大宽度，如果child宽度大于该值，按照最大宽度显示
minHeightdouble允许child最小高度，如果child宽度小于该值，按照最小高度显示
maxHeightdouble允许child最大高度，如果child宽度大于该值，按照最大高度显示

3 宽高尺寸处理

3.1 SizedBox

特定大小的盒子，强制child有特定的宽度和高度。如果宽度或高度为null，该组件会调整自身大小以匹配child的尺寸。

3.2 ConstrainedBox

用于限定child的最大、最小宽高。如果child为null，会尽可能缩小尺寸。
常用属性

属性名类型说明
constraintsBoxConstraintschild的限制条件，限制最大、最小宽高
childWidget子元素组件

3.3 LimitedBox

用于限定最大宽高，与ConstainedBox类似，只是LimitedBox没有最小宽高限制。
常用属性

属性名类型默认值说明
maxWidthdoubledouble.infini最大宽度
maxHeightdoubledouble.infinity最大高度

3.4 AspectRatio

用于设置调整child的宽高比。适用于需要固定组件宽高比的情景。aspectRatio属性不能为null，必须大于0且必须是有限的。

3.5 FractionallySizedBox

会根据现有空间调整child的尺寸，适用在一个区域里取百分比尺寸时。如果宽高因子为null，则child的宽高会尽可能充满整个区域。

常用属性

属性名类型说明
alignmentAlignmentGeometry对齐方式，不能为null
widthFactordouble宽度因子，宽度乘以该值，就是最后的宽度
heightFactordouble高度因子，用作计算最后实际高度

4 列表及表格布局

4.1 ListView

4.2 GridView

4.3 Table

表格布局，每一行的高度由内容决定，每一列的宽度由列数决定。

常用属性

属性名类型说明
columnWidthsMap<int, TableColumnWidth>设置每一列的宽度
defaultColumnWidthTableColumnWidth默认的每一列宽度，默认情况下均分
textDeirectionTextDirection文字方向
borderTableBorder表格边框
defaultVerticalAlignmentTableCellVerticalAlignment对齐方向。默认垂直方向
textBaseLineTextBaseLinedefaultVerticalAlignment为baseline时，会用到该属性

5 其他布局

5.1 Transform

矩阵转换。可以对child做平移、旋转、缩放等操作。

常用属性

属性名类型说明
transformMatrix4一个4x4矩阵
originOffset旋转点，相对于左上角顶点的偏移。默认为左上角顶点
alignmentAlignmentGeometry对齐方式
transformHitTestsbool点击区域是否也做相应的改变

5.2 Baseline

基准线布局，将所有元素底部放在同一水平线上。

常用属性

属性名类型说明
baselinedoublebaseline数值，必须要有，从顶部算
baselineTypeTextBaselinebaseline类型，必须要有。目前两种类型：alphabetic对齐底部，ideographic对齐

5.3 Offstage

用于控制child是否显示。

常用属性

属性名类型默认值说明
offstagebooltrue默认为true表示不显示，false时显示该组件

5.4 Wrap

跟row和column有些相似。单行的Wrap跟Row一样，单列的Wrap跟Column一样。适用于需要按宽度或高度让child自动换行的场景。

常用属性

属性名类型默认值说明
directionAxisAxis.horizontal主轴方向，默认水平
alignmentWrapAlignmentWrapAlignment.start主轴方向对齐方式，默认为start
spacingdouble0.0主轴方向的间距
runAlignmentWrapAlignmentWrapAlignment.startrun的对齐方式，可以理解为新的行或列
runSpacingdouble0.0run的间距
crossAxisAlignmentWrapAlignmentWrapAlignment.start交叉轴方向对齐方式
textDirectionTextDirection-文本方向
verticalDirectionVerticalDirection-children的摆放顺序，默认是down

6 示例

6.1 Align示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Align(
            alignment: Alignment.topRight,
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Color(0xffff0000),
            ),
          ),
        ),
      ),
    );
  }
}

效果显示：
在这里插入图片描述

6.2 Stack示例

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
//        child: buildPositionedStack(),
//        child: buildAlignmentStack(),
        child: buildIndexedStack(),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        setState(() {
          _index = Random().nextInt(2) % 2;
        });
      }),
    );
  }

  Stack buildIndexedStack() {
    return IndexedStack(
      index: _index,
      alignment: Alignment(1.2, -1.2),
      children: <Widget>[
        Container(
          color: Color(0xff0000ff),
          width: 200.0,
          height: 200.0,
        ),
        CircleAvatar(
          radius: 20.0,
          backgroundColor: Color(0xffff0000),
        ),
      ],
    );
  }

  Stack buildAlignmentStack() {
    return Stack(
      alignment: Alignment(1.2, -1.2),
      children: <Widget>[
        Container(
          color: Color(0xff0000ff),
          width: 200.0,
          height: 200.0,
        ),
        CircleAvatar(
          radius: 20.0,
          backgroundColor: Color(0xffff0000),
        ),
      ],
    );
  }

  Stack buildPositionedStack() {
    return Stack(
      children: <Widget>[
        Container(
          color: Color(0xffff0000),
          width: 200.0,
          height: 200.0,
        ),
        Positioned(
//              top: 10.0,
          child: CircleAvatar(
            radius: 20.0,
            backgroundColor: Color(0xff0000ff),
          ),
        ),
      ],
    );
  }
}

效果显示
在这里插入图片描述

6.3 Table示例

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Table(
          columnWidths: const <int, TableColumnWidth>{
            0: FixedColumnWidth(50.0),
            1: FixedColumnWidth(100.0),
            2: FixedColumnWidth(50.0),
            3: FixedColumnWidth(50.0),
          },
          border: TableBorder.all(
            color: Color(0xffff0000),
            width: 2.0,
          ),
          children: const <TableRow>[
            TableRow(children: [
              Text('头像'),
              Text('姓名'),
              Text('年龄'),
              Text('身高'),
            ]),
            TableRow(children: [
              Icon(Icons.description),
              Text('10号程序员'),
              Text('21'),
              Text('165'),
            ]),
            TableRow(children: [
              Icon(Icons.description),
              Text('10号程序员'),
              Text('21'),
              Text('170'),
            ]),
            TableRow(children: [
              Icon(Icons.description),
              Text('10号程序员'),
              Text('21'),
              Text('175'),
            ]),
          ],
        ),
      ),
    );
  }
}

效果显示：
在这里插入图片描述

傅晨明
关注
专栏目录
flutter--页面布局（Transform、Baseline、Wrap、Offstage）
weixin_43846755的博客
10-11 529
目录flutter--页面布局（Transform、Baseline、Wrap、Offstage）Transform(矩阵转换)Baseline(基准线布局)Wrap(按宽高自动换行布局) flutter–页面布局（Transform、Baseline、Wrap、Offstage） Transform(矩阵转换) 作用：做矩形变换-------可以对它的child做平移、旋转、缩放等操作 主要属性表： 属性名 类型 说明 transform Matrix4 一个4*4矩阵。 orig
Flutter中的页面布局属性
wangzunkuan的博客
10-29 470
概述 本文主要对flutter中的常用的页面布局进行说明，首先说一下基本的布局及装饰组件说明： 组件名称 中文释义 说明 Align 对齐布局 指定child的对齐方式 AspectRatio 调整宽高比 根据设置的宽高比调整child组件 BaseLine 基准线布局 所有的child底部所在的同一水平线 Center 居中布局 child处于水平和垂直方向的中间位置...
Flutter--页面布局
DLUT_WJX的博客
03-08 662
Padding组件 class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.fromLTRB(0, 0, 10, 0), child: GridView.coun...
Flutter之页面布局
追风者
08-13 692
Column、Row、Stack以及Center之前博客有过就不赘述了 get到了一些与布局相关的组件例如 1、FractionallySizedBox class ListPage extends StatelessWidget { @override Widget build(BuildContext context) { return Column(...
Flutter布局
archko的专栏
08-22 469
https://flutter.io/layout/ 当你箱子约束布局遇到一些困难时,可以查看文档: Introduction Unbounded constraints Flex 介绍: 在Flutter,控件由RenderBox对象来渲染的.Render box由父节点给出约束,自己在约束范围内决定大小.约束由高宽最大最小值组成. 通常,有三类箱子,区别在于他们如何处理约束: 尽...
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //...
Flutter页面布局之Stack层叠组件
01-08
Stack表示堆的意思，我们可以使用Stack或者结合Align或Positond实现定位布局 Stack常用属性： 属性 说明 alignment 配置所有子元素的显示位置 children 子元素 结合Positioned组件来控制每个子...
Flutter页面布局：Flutter AspectRatio、Card卡片组件、卡片图文列表
weixin_46136019的博客
03-15 574
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。
Flutter 基本布局
01-20
在本文中，我们将深入探讨如何使用Flutter来创建和管理页面布局。Flutter是一个强大的跨平台UI工具包，它提供了丰富的组件库，使得开发者可以快速构建美观且高性能的应用程序。以下是一些基本的布局概念和示例。 1....
flutter页面布局一
weixin_30733003的博客
06-04 119
Padding组件 在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。 该组件接收两个属性： padding ：padding 值, EdgeInsetss 设置填充的值 child ：子组件 例如，要实现前面的网...
【Flutter】页面布局：流式布局（Wrap、Flow）
最新发布
2303_80346267的博客
10-20 1107
在移动应用开发中，布局是非常重要的一部分，尤其是当我们需要处理动态或自适应的内容时。Flutter 提供了几种布局方式来帮助开发者处理复杂的 UI 场景，其中 `Wrap` 和 `Flow` 是常用的流式布局组件。它们在处理多个子组件时表现优越，尤其适合处理尺寸不确定的组件或响应式设计需求。
Flutter之layout页面布局
fengyongge的专栏
03-25 1146
官方传送门： https://flutter.dev/docs/development/ui/widgets/layout flutter的layout分类 Single-child layout widgets 这种布局指父级widget中只能包含唯一一个子级widget。例如：Container容器布局，Center居中布局，Padding填充布局，Align对齐布局，FittedBox缩放布...
Flutter 内容页布局
兰叶书的博客
12-25 172
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( hom...
Flutter (十三) 页面布局 综合案例 ( 二 )
没有翅膀的我们，只是随便认为不能飞而已
06-20 360
思路 封装公用Widget，ListView的另一个用途：避免内容过长 代码： import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(title: '综合 布局', home: new LayoutDemo())); } class LayoutDemo extends Stateles...
flutter 页面布局 Paddiing Row Column Expanded 组件
weixin_30764137的博客
07-11 184
Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。 属性 说明 padd...
Flutter劫富济贫计划（二）——flutter页面布局实战
qq_38774121的博客
11-11 286
消息列表页面 这里提供两种方法完成的该消息列表 Card控件布局完成 自定义消息列表 下图只是Card布局展示，可以自己更换一下控件 代码 import 'package:flutter/material.dart'; import 'package:project/plugins/ScreenAdapter.dart'; class ChatPage extends StatelessWi...
12Flutter页面布局 AspectRatio和Cart卡片组件
weixin_30522095的博客
09-03 209
/* FlutterAspectRatio、Cart卡片组件： AspectRatio的作用是根据设置调整子元素child的宽高比。 AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的。 类似于BoxFit中的contain,按照固定比率去尽量占满区域。 如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRa...
写一个flutter页面布局,全屏显示一张图片,当点击后在图片上左上边显示图片名称,图片底部显示下一张和上一张的图标按钮,图片左边有一个抽屉,点击打开抽屉显示图片列表
03-24
好的，以下是一个简单的 Flutter 页面布局代码，可以实现您所描述的功能： ```dart import 'package:flutter/material.dart'; class MyHomePage extends StatefulWidget { @override _MyHomePageState ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值