(原创)Flutter基础入门:各种常用容器类组件

news/2024/2/21 2:52:43

前言

上篇博客主要讲了Flutter的Shape实现
Flutter基础入门:实现各种Shape效果
今天主要讲下Flutter中常用的一些容器组件
Flutter中组件数量很多,分类方式也各有不同
比如可以分为有态组价和无态组件
又可以分为容器组件、功能组件等
拿功能组件来说
有用来显示文字的TextView
显示图片的Image
显示列表的ListView等等
不过今天主要讲的还是一些容器组件
那么何为容器组件呢?
容器组件指的是可以容纳下级组件(1个或多个),
使用时以独立组件形式被运用的组件。
比如Row组件,刚刚提到的ListView组件等。
今天讲的容器组件
主要侧重点在于讲他们所支持的一些功能
通过介绍他们需要传入的参数的含义
来更清晰地了解这些容器的功能
而不仅仅是介绍用法
当然,这边也是选择一些常用并且功能强大的组件来介绍
下面正式开始

各种容器

Container

Container会是我们进行Flutter开发中用到的最强大也是最常用的单容器类控件
它可以实现装饰、定位、背景颜色、对齐方式、变换、裁剪等等一系列功能
我们先看下它的构造方法

  Container({super.key,this.alignment,this.padding,this.color,this.decoration,this.foregroundDecoration,double? width,double? height,BoxConstraints? constraints,this.margin,this.transform,this.transformAlignment,this.child,this.clipBehavior = Clip.none,})

可以看到,这里可以传入很多的可选入参,我们逐一介绍

alignment

对齐方式,可以设置子组件的对齐方式
举例如下:

  Widget build(BuildContext context) {return Container(width: 200,height: 200,alignment: Alignment.center,color: Colors.grey,child: Text('文字控件'),);}

Alignment.center点进去会看到,其实是
center = Alignment(0.0, 0.0);
同理:
topLeft = Alignment(-1.0, -1.0);
bottomRight = Alignment(1.0, 1.0);
这样我们就知道了:
Alignment构造方法的第一个参数代表左右位置,第二个参数代表上下位置
0代表中心点,-1代表最左/最上,1代表最右/最下
比如:Alignment(0,1) 就是左右居中,靠下对齐
也就是:
bottomCenter = Alignment(0.0, 1.0);

padding & margin

padding是内边距,margin是外边距
比如:

  Widget build(BuildContext context) {return Container(width: 200,height: 200,padding: EdgeInsets.all(10),margin: EdgeInsets.only(top: 10),alignment: Alignment.topLeft,color: Colors.grey,child: Text('文字控件'),);}

出来效果就是:
在这里插入图片描述
这里要注意,padding & margin需要传入的都是EdgeInsetsGeometry类型
EdgeInsetsGeometry抽象类有两个子类:EdgeInsets和EdgeInsetsDirectional
可以理解为这个类就是用来设置一些间距的

decoration & foregroundDecoration

foregroundDecoration是绘制在child前面的装饰。如果设置decoration, 此时foregroundDecoration 样式会叠加在decoration样式上边
装饰器可以看我这个系列下专门的博客
Flutter基础入门:装饰器Decoration

constraints

constraints是一个BoxConstraints类型
主要用来控制子控件的最小宽高,如下:

  Container(width: 200,height: 200,color: Colors.grey,alignment: Alignment.center,child: Container(child: Text('文字控件'),constraints: BoxConstraints(minWidth: 100,minHeight: 100),color: Colors.red,),);

限制了最小宽高为100后,文字的背景大小就变成100了,而不再是之前紧紧包裹着文字
在这里插入图片描述

transform & transformAlignment

transform主要是通过一个4*4的变换矩阵来对子组件就行变换
可以实现的效果如:斜切,缩放,平移,旋转,透视等
transformAlignment则是变换的位置,
这个参数的类型和对齐方式alignment参数的类型是一样的
都是AlignmentGeometry类型
默认是Alignment.topLeft
比如我们可以以组件中心位置对Z轴进行旋转变换:

  Container(width: 200,height: 200,transformAlignment: Alignment.center,//变换位置:中心点旋转transform: Matrix4.rotationZ(-0.5),//z轴旋转color: Colors.grey,alignment: Alignment.center,child: Text('文字控件'),
);

效果如下:
在这里插入图片描述

clipBehavior

clipBehavior是是组件内容边缘的切割方式,当组件内容溢出时可以选择不同的裁剪方式
在这里插入图片描述

color & width &height & child

color就是用来设置容器填充色的,宽高传入double类型就好
child自然就是子组件了
这些简单的就不演示了

Padding

Padding主要是给子组件添加内边距的,可参考Container的padding

Align

Align用来设置子组件的对齐方式,可参考Container的alignment

ConstrainedBox

ConstrainedBox用来设置最小宽高,需要传入一个BoxConstraints类型,可参考Container的constraints

DecoratedBox

DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰(Decoration),如背景、边框、渐变等。
它的构造函数如下:

  const DecoratedBox({super.key,required this.decoration,this.position = DecorationPosition.background,super.child,})

其中position属性主要是设置装饰位置的
分为:
(DecorationPosition.foreground)前景,(DecorationPosition.background)背景

Transform

Transform主要是给子组件添加变换效果的的,可参考Container的transform

RotatedBox

用来旋转子组件的容器

  const RotatedBox({super.key,required this.quarterTurns,super.child,})

quarterTurns代表旋转的次数,每次旋转的度数只能是90度的整数倍
所以RotatedBox旋转的角度也只能是90度的整数倍

Clip裁剪相关组件

Clip相关组件主要用来进行对子组件的裁剪,如:
ClipOval:子组件为正方形时剪裁成内贴圆形;为矩形时,剪裁成内贴椭圆
ClipRRect:将子组件剪裁为圆角矩形
ClipRect:默认剪裁掉子组件布局空间之外的绘制内容(溢出部分剪裁)
ClipPath:按照自定义的路径剪裁
下面看具体例子:

class _ClipWidget extends StatelessWidget {final Image photo = Image.network('https://tse1.mm.bing.net/th/id/OET.5272002b31e349ca8b7f061d2d17466f?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',height: 100,width: 100,fit: BoxFit.cover,);Widget build(BuildContext context) => MaterialApp(home: Scaffold(body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [photo,const SizedBox(height: 20,),ClipOval(child: photo,),const SizedBox(height: 20,),ClipRRect(child: photo,borderRadius: const BorderRadius.all(Radius.circular(20)),),const SizedBox(height: 20,),Container(color: Colors.red,child: Row(children: [Align(alignment: Alignment.centerRight,widthFactor: 0.5,child: ClipRect(child: photo,),),const Text('我是文本')],),),],),),),);
}

效果如下:
在这里插入图片描述

FittedBox

当子组件的宽高比和父组件的宽高比不一样时,我们等比拉伸或者填充父组件,这时我们可以使用FittedBox

  Container(height: 200,width: 200,color: Colors.green,child: FittedBox(fit: BoxFit.contain,child: Container(height: 50,width: 80,color: Colors.red,),),);

如图:
在这里插入图片描述
其中fit参数表示了子控件的填充方式,说明如下:
fill:填充父组件,宽高比发生变化。
contain:等比拉伸,但子控件不能超出父控件。
cover:尽可能的小,等比拉伸充满父控件。
fitWidth:等比拉伸,宽充满父控件。
fitHeight:等比拉伸,高充满父控件。
none:默认子控件居中,不做拉伸处理,超出父控件的部分裁剪。
scaleDown:在子控件为Image且缩小的情况和contain一样,否则和none一样。

card

用来把子组件做成卡片类的样式
也可以用来实现一些Shape的效果
主要属性如下:

  const Card({super.key,this.color,//背景色this.shadowColor,//阴影颜色this.surfaceTintColor,this.elevation,//阴影高度this.shape,this.borderOnForeground = true,//是否在 child 前绘制 border,默认为 truethis.margin,this.clipBehavior,this.child,this.semanticContainer = true,})

可以看到大部分还是和Container类似的

Row & Column

这两个类似Android的LinearLayout
他们的children属性可以传入一个子组件数组
Row是对子组件进行横向布局
Column则是对子组件进行纵向布局

Wrap & Stack

Wrap 流式布局
Stack 类似Android中的帧布局FrameLayout

Scaffold

Scaffold翻译过来是脚手架的意思
其实也是为了方便我们快速搭建页面而提供给我们的一个模板组件

  const Scaffold({super.key,this.appBar,this.body,this.floatingActionButton,this.floatingActionButtonLocation,this.floatingActionButtonAnimator,this.persistentFooterButtons,this.persistentFooterAlignment = AlignmentDirectional.centerEnd,this.drawer,this.onDrawerChanged,this.endDrawer,this.onEndDrawerChanged,this.bottomNavigationBar,this.bottomSheet,this.backgroundColor,this.resizeToAvoidBottomInset,this.primary = true,this.drawerDragStartBehavior = DragStartBehavior.start,this.extendBody = false,this.extendBodyBehindAppBar = false,this.drawerScrimColor,this.drawerEdgeDragWidth,this.drawerEnableOpenDragGesture = true,this.endDrawerEnableOpenDragGesture = true,this.restorationId,})

Scaffold的属性特别多,我们挑一些常用的来讲
appBar:页面顶部栏,是一个PreferredSizeWidget抽象类,可以选择AppBar,TabBar这些实现类来作为顶部栏
body:主体部分,放入一个子组件即可
bottomNavigationBar:底部组件,一般用于实现首页底部的按钮切换功能
drawer & endDrawer:左右侧滑组件
backgroundColor:背景色
floatingActionButton:浮动按钮
floatingActionButtonLocation:浮动按钮位置
下面写一个Scaffold包裹的页面
实现一些基本的演示功能:

import 'package:flutter/material.dart';
void main() {runApp(MaterialApp(title: "首页",home: CustomScaffold(),));
}class CustomScaffold extends StatefulWidget {const CustomScaffold({Key? key}) : super(key: key);State<StatefulWidget> createState() => _CustomScaffoldState();
}// AppBar 默认的实例,有状态
class _CustomScaffoldState extends State with SingleTickerProviderStateMixin {final List<String> tabs = const ['实时新闻', '今日头条', '经济', '股票', '体育竞技', '国际风云'];int _position = 0;final Map<String,IconData> iconsMap = {"首页": Icons.home,"动态": Icons.toys,"收藏": Icons.favorite,"图鉴": Icons.class_,"我的": Icons.account_circle,};final List<Color> _colors = [Colors.blue,Colors.red,Colors.yellow,Colors.green,Colors.purple,];late TabController _tabController;void initState() {super.initState();_tabController = TabController(vsync: this, length: tabs.length);}void dispose() {_tabController.dispose();super.dispose();}Widget build(BuildContext context) {return SizedBox(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height - 300,child: Scaffold(floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,floatingActionButton: FloatingActionButton(child: const Icon(Icons.add),onPressed: () {},),drawer: _buildLeftDrawer(),endDrawer: _buildLeftDrawer(),appBar: AppBar(title: const Text('首页'),backgroundColor: Colors.blue,centerTitle: true,bottom: _buildTabBar(),),body: _buildTableBarView(),bottomNavigationBar: _buildBottomNavigationBar(),),);}Drawer _buildLeftDrawer() => Drawer(elevation: 1,child: Image.network('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F22%2F20190722235951_J3aVw.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684313785&t=63178f27b92b3cfc174d8354fe203c94',fit: BoxFit.cover,),);PreferredSizeWidget _buildTabBar() => TabBar(isScrollable: true,controller: _tabController,indicatorColor: Colors.orangeAccent,tabs: tabs.map((e) => Tab(text: e)).toList(),);Widget _buildBottomNavigationBar() => BottomNavigationBar(onTap: (position) => setState(() => _position = position),currentIndex: _position,elevation: 1,backgroundColor: Colors.white,iconSize: 25,selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),showUnselectedLabels: false,showSelectedLabels: true,items: iconsMap.keys.map((key) => BottomNavigationBarItem(label: key,icon: Icon(iconsMap[key]),backgroundColor: _colors[_position])).toList(),);Widget _buildTableBarView() => TabBarView(controller: _tabController,children: tabs.map((e) => Center(child: Text(e,style: const TextStyle(color: Colors.blue, fontSize: 20),))).toList());
}

效果如下:
在这里插入图片描述

资料分享

最后给大家推荐一个不错的项目:
Flutter_unit
大部分的组件都可以在这个项目里面学习
里面不仅仅有组件的介绍,还有实实在在的代码和效果演示

还有一个网站也可以学习到更多的组件:
Flutter | 老孟


http://www.ppmy.cn/news/43974.html

相关文章

套利策略样本外跟踪

量化策略开发&#xff0c;高质量社群&#xff0c;交易思路分享等相关内容 『正文』 ˇ 专享策略No.2 | 商品股指通用套利策略(一) 日线版本&#xff1a; 15分钟版本&#xff1a; 专享02模型开发步骤&#xff1a; 1.计算套利品种价比的高开低收&#xff0c;不是价差。 2.计…

〖Python网络爬虫实战①〗- HTTP原理

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付费…

JVM之低延迟垃圾收集器

目录 低延迟垃圾收集器 概要 各款收集器的并发情况 Shenandoah收集器 Shenandoah相比G1的改进之处 链接矩阵 定义 优点 Shenandoah收集器的工作过程 Brooks Pointer 转发指针技术 转发指针的优缺点 Shenandoah 性能测试 Shenandoah 总结 ZGC 收集器 ZGC的Region的…

Docker 学习笔记

Docker学习笔记 今天整理文件的时候找到的三年前学习 Docker 时记的笔记。 常见Docker命令 $ docker image ls查看本机docker镜像 $ docker container run -it ubuntu:16.04 /bin/bashdocker container run : 告诉Dcoker daemon启动容器-it 开启容器的交互模式并将当前的Sh…

嵌入式软件基础设施的建立

软件架构这东西&#xff0c;众说纷纭&#xff0c;各有观点。在我看来&#xff0c;软件架构是软件系统的基本结构&#xff0c;包含其组件、组件之间的关系、组件设计与演进的规则&#xff0c;以及体现这些规则的基础设施。 软件架构&#xff0c;从来不是一件容易事&#xff0c;…

三分钟搭建个人博客技术栈Nuxt3+vite+mysql+koa2

最近也是想入一下Nuxt3的坑&#xff0c;然后就写了一个博客系统&#xff0c;目前已开源github&#xff0c;欢迎大家star&#xff01;&#xff01;&#xff01; 效果预览 网址&#xff1a;http://180.76.121.2:3000/ github地址 https://github.com/ztzzhi/ztzzhi-nuxt3-vite…

不走弯路,AI真的能提高生产效率

AI应用虽然取得了令人瞩目的成果&#xff0c;但是在实际应用中仍存在不少困境。市面上不乏有AI绘画、AI写作、AI聊天的相关产品&#xff0c;即使Chatgpt可以写代码、写论文&#xff0c;但由于技术的有限性&#xff0c;还需要不断地优化完善才能给出更精准的答复&#xff0c;也少…

手动清除gitlab中prometheus的数据

背景&#xff1a; gitlab服务器上&#xff0c; 磁盘经常爆满。后来通过 du -sh ./* 查出prometheus下的data占了绝大多数磁盘空间。 因此&#xff0c;准备删除prometheus的数据。 思路 由于prometheus的数据占用的空间较大&#xff0c;因此在实际使用时&#xff0c;可以关闭…

阿里云ECS突发性能型t6和共享型n4性能区别对比

阿里云服务器ECS共享型n4和ECS突发性能型t6性能有区别吗&#xff1f;为什么ECS突发性能型t6便宜&#xff0c;突发性能实例是限制CPU基准性能的&#xff0c;共享型n4实例是100%CPU性能&#xff0c;主要区别在于阿里云突发性能云服务器CPU性能基线的问题&#xff0c;云服务器吧来…

R730服务器环境搭建(centos7、lanproxy、docker、k8s)

文章目录前言一、centos7安装1.制作u盘启动盘2.开始装系统&#xff1a;二、环境安装&#xff08;lanproxy、docker、k8s&#xff09;1.lanproxy安装2.docker安装&#xff08;如果通过k8sOfflineSetup安装k8s可以跳过这一步&#xff0c;因为会自动安装docker&#xff09;3.安装k…

电厂人员定位怎么做?智慧电厂人员定位系统解决方案告诉你答案

伴随着“泛在电力物联网建设”的提出&#xff0c;构建智慧电厂引起重大关注&#xff0c;全国各地纷纷响应。传统电力企业一直面临着人员管控难、生产环境复杂且危险多等问题&#xff0c;物联网技术的兴起使得电厂的数字化和智慧化转型已成为电力企业保障生产作业安全、提升生产…

RabbitMq 的消息可靠性问题(二)---MQ的消息丢失和consumer消费问题

前言 RabbitMq 消息可靠性问题(一) — publisher发送时丢失 前面我们从publisher的方向出发解决了发送时丢失的问题&#xff0c;那么我们在发送消息到exchange, 再由exchange转存到queue的过程中。如果MQ宕机了&#xff0c;那么我们的消息是如何确保可靠性的呢&#xff1f;当消…

【计算机网络—— 安装packet tracer的教程,管理MAC地址和配置路由器的实验步骤以及心得体会】

文章目录安装packet tracer的教程管理MAC地址实验目的 &#xff1a;管理MAC地址实验内容及过程记录&#xff08;一&#xff09;运行Cisco Packet Tracer软件&#xff08;二&#xff09;选择PC终端&#xff08;三&#xff09;运行终端&#xff08;四&#xff09;按表内容对交换机…

[SSD 纠错] 极详细的闪存ECC纠错讲解 | NAND 闪存医生是怎样拯救数据的

声明 主页:元存储的博客_CSDN博客 依公开知识及经验整理,如有误请留言。 个人辛苦整理,付费内容,禁止转载。 内容摘要 全文8700字 前言 1 概念 2 列校验 3 行校验

一文吃透Arthas常用命令!

Arthas 常用命令 简介 Arthas 是Alibaba开源的Java诊断工具&#xff0c;动态跟踪Java代码&#xff1b;实时监控JVM状态&#xff0c;可以在不中断程序执行的情况下轻松完成JVM相关问题排查工作 。支持JDK 6&#xff0c;支持Linux/Mac/Windows。这个工具真的很好用&#xff0c;…

ESP32驱动1.28寸GC9A01播放视频(二、程序说明和效果展示)

ESP32驱动1.28寸GC9A01播放视频&#xff08;二、程序下载和效果展示&#xff09;1.28寸GC9A01屏幕屏幕引脚定义程序说明程序更改1、Arduino_DataBus *bus和Arduino_GC9A01 *gfx要改成ESP32匹配的2、SPI库的SPI.cpp文件中的“SPIClass::begin”函数中&#xff0c;引脚定义需要跟…

生活污水处理设备选购指南

生活污水中含有大量的有机物&#xff08;如蛋白质、碳水化合物、脂肪、尿素、氨氮等&#xff09;及大量的病原微生物&#xff0c;可导致传染病蔓延流行。因此&#xff0c;生活污水在排放前&#xff0c;需要进行处理。那么如何正确的选择生活污水处理设备呢&#xff1f; 一、生活…

北京小厂Java实习面经

目录1.数据库的三大范式2.事务四个特性3.知道多少种索引&#xff0c;分别讲讲4.主键索引和唯一索引的区别5.索引失效的场景6.数据库的日志知道哪些&#xff0c;分别讲讲7.redis的数据结构和应用场景8.缓存击穿是怎么产生的&#xff0c;解决方案9.redis中key的过期策略10.redis内…

windows命令执行的几种绕过方法

windows命令执行的几种绕过方法介绍1、添加特殊符号2、定义变量3、切割字符串4、逻辑运算符在绕过中的作用5、利用for循环拼接命令介绍 反检测、反清理&#xff0c;是红队攻击中的重中之重&#xff0c;本文详细描述了几种windows执行命令的几种绕过手法。 1、添加特殊符号 w…

Greenplum数据库执行器——PartitionSelector执行节点

为了能够对分区表有优异的处理能力&#xff0c;对于查询优化系统来说一个最基本的能力就是做分区裁剪partition pruning&#xff0c;将query中并不涉及的分区提前排除掉。如下执行计划所示&#xff0c;由于单表谓词在parititon key上&#xff0c;在优化期间即可确定哪些可以分区…
最新文章