当前位置： 首页 > news >正文

Flutter容器

news 来源：原创 2024/9/30 5:37:42

内边距padding

class MyBody extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(//为了可以看出内边距，将容器设置成红色color: Colors.red,child: Padding(padding: EdgeInsets.all(15),child: MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),),);}
}//定义一个 公共类
class MyImage extends StatelessWidget {String imgUrl;MyImage(this.imgUrl);@overrideWidget build(BuildContext context) {return Container(height: 100,width: 100,child: Image.network(this.imgUrl,fit: BoxFit.cover,),);}
}

布局限制类容器

  • 布局限制类容器是用来限制子元素的,并不是用来限制自身的
body: ConstrainedBox(constraints: BoxConstraints. expandO.//编辑剩余空间
constraints: BoxConstraints(minWidth: double. infinity,minHeipht: 200,maxHeight: 300
),
child: Container(width: 1,color: Colors. red
)
)
);

装饰容器

  • DecoratedBox可以在其子组件绘制前后增加一些装饰，如背景、边框等。
body: DecoratedBox(decoration: BoxDecoration(gradient: LinearGradient (colors: [Colors. yellow, Colors. red]),borderRadius: BorderRadius. all(Radius. circular(3. 0)),boxShadow: [BoxShadow(color: Colors. black,offset: Offset(3, 3),blurRadigs: 4.0)]
),
child: FlatButton(onPressed: null, child: Text ('test button')))

在这里插入图片描述

  • BoxDecoration是DecoratedBox的子类：
BoxDecoration({Color color, //颜色DecorationImage image,//图片BoxBorder border, //边框BorderRadiusGeometry borderRadius, //圆角List<BoxShadow> boxShadow, //阴影,可以指定多个Gradient gradient, //渐变BlendMode backgroundBlendMode, //背景混合模式BoxShape shape = BoxShape.rectangle, //形状
})

变换transform

  • Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作
Container(margin: const EdgeInsets.fromLTRB(20, 100, 20, 20),color: Colors.green,child: Transform(alignment: Alignment.bottomRight, //原点transform: Matrix4.skewY(0.5), //沿Y轴倾斜0.5弧度child: Container(padding: const EdgeInsets.all(10),color: Colors.brown,child: Text("Flutter NB"),),),width: 100,height: 50,
),
  • Transform.translate接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离。
Text("平移"),
DecoratedBox(decoration: BoxDecoration(color: Colors.purple),child: Transform.translate(//原点为左上角  往右平移 50  往下平移10offset: Offset(50, 10),child: Text("谁是最可爱的人?"),),
),
  • Transform.rotate可以对子组件进行旋转变换
Container(margin: const EdgeInsets.only(top: 50),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text("旋转"),DecoratedBox(decoration: BoxDecoration(color: Colors.purple),child: Transform.rotate(angle: pi / 2,child: Text("是他是他就是他"),),),],),
),
  • Transform.scale可以对子组件进行缩小或放大
Container(margin: const EdgeInsets.only(left: 100, top: 50),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text("缩放"),DecoratedBox(decoration: BoxDecoration(color: Colors.purple),child: Transform.scale(scale: 2, //放大2倍child: Text("大大泡泡糖"),),),],),
),

Container

  • 是flutter里面一个很重要的容器,相当于html中的div
    属性:
  1. key：Container唯一标识符，用于查找更新。
  2. alignment：控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
  3. padding：decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
  4. color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
  5. decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
  6. foregroundDecoration：绘制在child前面的装饰。
  7. width：container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
  8. height：container的高度，设置为double.infinity可以强制在高度上撑满。
  9. constraints：添加到child上额外的约束条件。
  10. margin：围绕在decoration和child之外的空白区域，不属于内容区域。
  11. transform：设置container的变换矩阵，类型为Matrix4。
  12. child：container中的内容widget。
    在这里插入图片描述

可滚动widgets

  • 在Flutter中, 当内容超过显示视图时，如果没有特殊处理，Flutter则会提示Overflow错误
  • Flutter提供了多种可滚动（Scrollable Widget）用于显示列表和长布局
  • 可滚动Widget都直接或间接包含一个Scrollable, 下面是常用的几个可滚动的Widget
    1. SingleChildScrollView
    2. ListView
    3. GridView
    4. CustomScrollView
    5. 滚动监听及控制ScrollController

1.SingleChildScrollView,使用的时候外边需要Scrollbar包裹

body: Scrollbar(child: SingleChildScrollView(child: Container(height: 3000,color: Colors.red)),
)

2.ListView

  • ListView是最常用的可滚动widget，它可以沿一个方向线性排布所有子widget, 类似于ReactNative中的ListView

  • ListView共有四种构造函数

      1. ListView()默认构造函数2. ListView.builder()3. ListView.separated()4. ListView custom()

ListView({Key key,Axis scrollDirection = Axis.vertical,bool reverse = false,ScrollController controller,bool primary,ScrollPhysics physics,EdgeInsetsGeometry padding,// 是否根据子widget的总长度来设置ListView的长度，默认值为falsebool shrinkWrap = false,// cell高度this.itemExtent,// 子widget是否包裹在AutomaticKeepAlive中bool addAutomaticKeepAlives = true,// 子widget是否包裹在RepaintBoundary中bool addRepaintBoundaries = true,bool addSemanticIndexes = true,// 设置预加载的区域, moren 0.0double cacheExtent,//子widget列表List<Widget> children = const <Widget>[],// 子widget的个数int semanticChildCount,
})

例子

class ScrollView extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(itemExtent: 60,cacheExtent: 100,addAutomaticKeepAlives: false,children: renderCell(),);}List<Widget> renderCell() {String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";return str.split("").map((item) => ListTile(title: Text('字母--$item'),subtitle: Text('这是字母列表'),leading: Icon(Icons.wifi),)).toList();}
}
body: Column(children: <Widget>[ListTile(title:Text(因定的表头”)),Container(height: 400,child: ListView. builder(itemCount: 50,itemExtent: 50,itemDuilder: (BuildContext context, int index) {return Text (' + index. toString0);)),)],
)

3.GridView

GridView可以构建二维网格列表, 系统给出了五中构造函数

  • GridView()
  • GridView.count
  • GridView.extent
  • GridView.builder
  • GridView.custom
// 默认构造函数
GridView({Key key,Axis scrollDirection = Axis.vertical,bool reverse = false,ScrollController controller,bool primary,ScrollPhysics physics,bool shrinkWrap = false,EdgeInsetsGeometry padding,@required this.gridDelegate,bool addAutomaticKeepAlives = true,bool addRepaintBoundaries = true,bool addSemanticIndexes = true,double cacheExtent,List<Widget> children = const <Widget>[],int semanticChildCount,
})
  • 可以看到, 除了gridDelegate属性外, 其他属性和ListView的属性都一样, 含义也都相同
  • SliverGridDelegate是一个抽象类，定义了GridView排列相关接口，子类需要通过实现它们来实现具体的布局算法
  • Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent, 下面我们分别介绍

1. SliverGridDelegateWithFixedCrossAxisCount
该子类实现了一个横轴为固定数量子元素的排列算法，其构造函数为：

const SliverGridDelegateWithFixedCrossAxisCount({// 横轴子元素的数量,此属性值确定后子元素在横轴的长度就确定了,即ViewPort横轴长度/crossAxisCount。@required this.crossAxisCount,// 主轴方向的间距this.mainAxisSpacing = 0.0,// 侧轴方向子元素的间距this.crossAxisSpacing = 0.0,// 子元素在侧轴长度和主轴长度的比例, 由于crossAxisCount指定后子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度this.childAspectRatio = 1.0,
})

从上面的个属性可以发现，子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意，这里的子元素指的是子widget的最大显示空间，注意确保子widget的实际大小不要超出子元素的空间, 代码示例如下

class ScrollView extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView(padding: EdgeInsets.all(10),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,childAspectRatio: 1,mainAxisSpacing: 10,crossAxisSpacing: 10),children: <Widget>[Container(color: Colors.orange),Container(color: Colors.blue),Container(color: Colors.orange),Container(color: Colors.yellow),Container(color: Colors.pink)],);}
}

2.GridView.count
GridView.count构造函数内部使用了
SliverGridDelegateWithFixedCrossAxisCount，我们通过它可以快速的创建横轴固定数量子元素的GridView

GridView.count({Key key,Axis scrollDirection = Axis.vertical,bool reverse = false,ScrollController controller,bool primary,ScrollPhysics physics,bool shrinkWrap = false,EdgeInsetsGeometry padding,@required int crossAxisCount,double mainAxisSpacing = 0.0,double crossAxisSpacing = 0.0,double childAspectRatio = 1.0,bool addAutomaticKeepAlives = true,bool addRepaintBoundaries = true,bool addSemanticIndexes = true,double cacheExtent,List<Widget> children = const <Widget>[],int semanticChildCount,
})

上面SliverGridDelegateWithFixedCrossAxisCount中给出的示例代码等价于：

class CountGridView extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView.count(padding: EdgeInsets.all(10),crossAxisCount: 3,mainAxisSpacing: 10,crossAxisSpacing: 10,childAspectRatio: 1,children: <Widget>[Container(color: Colors.orange),Container(color: Colors.blue),Container(color: Colors.orange),Container(color: Colors.yellow),Container(color: Colors.pink)],);}
}

3.GridView.extent
同样GridView.extent构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent，我们通过它可以快速的创建侧轴子元素为固定最大长度的的GridView

class ExtentScrollView extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView.extent(padding: EdgeInsets.all(10),maxCrossAxisExtent: 100,childAspectRatio: 1,mainAxisSpacing: 10,crossAxisSpacing: 10,children: <Widget>[Container(color: Colors.orange),Container(color: Colors.blue),Container(color: Colors.orange),Container(color: Colors.yellow),Container(color: Colors.pink)],);}
}

4.GridView.builder

class BuilderGridView extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView.builder(itemCount: 50,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4,mainAxisSpacing: 10,crossAxisSpacing: 10),itemBuilder: (content, index) {return Container(color: Colors.orange,child: Center(child: Text('$index'),),);},);}
}

5.GridView.custom

相关文章：

  • SpheroGPT: 声控自然语言编程 AI 玩具 Demo 具身智能 图文解说 完全开源机器人
  • 【学习笔记】Windows GDI绘图(一)图形概述、直线、曲线和图形
  • Mysql与Navicat可视化命令大全 ----项目实战
  • java String的Split方法， 分割字符时，保留最后的空字符串
  • VLAN---虚拟局域网
  • 58同城如何降低 80%的机器成本 | OceanBase案例
  • Sping源码（七）—ConfigurationClassPostProcessor —— 后续处理
  • 《QT实用小工具·六十四》QT实现仿Windows消息通知控件可交互
  • 关于Mysql基本概念的理解
  • HCIP-Datacom-ARST自选题库__MPLS简答【4道题】
  • Spark累加器
  • Java设计模式-观察者模式（19）
  • 用户态网络缓冲区设计
  • JavaEE技术之分布式事务(理论、解决方案、Seata解决分布式事务问题、Seata之原理简介、断点查看数据库表数据变化)
  • 51汇编--AD和DA
  • SegmentFault for Android 3.0 发布
  • 〔开发系列〕一次关于小程序开发的深度总结
  • 5分钟即可掌握的前端高效利器：JavaScript 策略模式
  • Angular 响应式表单之下拉框
  • AngularJS指令开发（1）——参数详解
  • Asm.js的简单介绍
  • axios请求、和返回数据拦截，统一请求报错提示_012
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • iOS 颜色设置看我就够了
  • JavaSE小实践1：Java爬取斗图网站的所有表情包
  • Java比较器对数组，集合排序
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • leetcode388. Longest Absolute File Path
  • Making An Indicator With Pure CSS
  • mysql 数据库四种事务隔离级别
  • vue总结
  • 两列自适应布局方案整理
  • 前端技术周刊 2019-01-14：客户端存储
  • 算法---两个栈实现一个队列
  • 译米田引理
  • 用jQuery怎么做到前后端分离
  • 字符串匹配基础上
  • raise 与 raise ... from 的区别
  • ​​快速排序（四）——挖坑法，前后指针法与非递归
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #进阶：轻量级ORM框架Dapper的使用教程与原理详解
  • $.proxy和$.extend
  • (13)Hive调优——动态分区导致的小文件问题
  • (2009.11版)《网络管理员考试 考前冲刺预测卷及考点解析》复习重点
  • （2021|NIPS，扩散，无条件分数估计，条件分数估计）无分类器引导扩散
  • （Java企业 / 公司项目）点赞业务系统设计-批量查询点赞状态（二）
  • (zz)子曾经曰过：先有司，赦小过，举贤才
  • （附源码）springboot炼糖厂地磅全自动控制系统 毕业设计 341357
  • （规划）24届春招和25届暑假实习路线准备规划
  • （六）vue-router+UI组件库
  • (免费领源码）Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • （三）Hyperledger Fabric 1.1安装部署-chaincode测试
  • (三)mysql_MYSQL(三)
  • (十三)Maven插件解析运行机制
  • (一)appium-desktop定位元素原理