【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
2024-05-17 00:40:54
文章目录
- 一、PhysicalModel 组件
- 二、 完整代码示例
- 三、 相关资源
一、PhysicalModel 组件
PhysicalModel 组件 : 可以将布局显示成不同的形状 ,
class PhysicalModel extends SingleChildRenderObjectWidget {const PhysicalModel({Key key,this.shape = BoxShape.rectangle, // 形状 : 圆形 , 矩形 this.clipBehavior = Clip.none, // 裁剪行为this.borderRadius, // 圆角半径 this.elevation = 0.0,@required this.color, // 颜色值 this.shadowColor = const Color(0xFF000000), // 背景颜色Widget child, // 被裁减的组件}) : assert(shape != null),assert(elevation != null && elevation >= 0.0),assert(color != null),assert(shadowColor != null),assert(clipBehavior != null),super(key: key, child: child);
}
PhysicalModel 组件用法 :
- 设置裁剪形状 : 默认矩形 , 可以在 shape 字段设置圆形 ;
- 设置背景颜色 : color 字段设置背景颜色 , Color 类型 ;
- 设置圆角半径 : borderRadius 字段设置 , BorderRadius 类型 ;
- 设置裁剪行为 : clipBehavior 字段设置裁剪行为 , Clip 枚举类型 , 无/有锯齿/抗锯齿/抗锯齿+保存图层 ;
- 设置被裁剪的组件 : child 字段设置被裁减的组件 , Widget 类型 ;
PhysicalModel(color: 背景颜色 ( Color 类型 ),// 设置圆角半径 15borderRadius: 圆角半径 ( BorderRadius 类型 ),// 设置裁剪行为 , 抗锯齿clipBehavior: Clip 枚举类型 ( 无/有锯齿/抗锯齿/抗锯齿+保存图层 ),// 设置被裁剪的组件 child: 被裁剪的组件 ( Widget 类型 ),
)
代码示例 : PhysicalModel 组件裁剪 PageView 组件 , 将 PageView 组件裁剪成圆角矩形样式 ;
PhysicalModel(color: Colors.transparent,// 设置圆角半径 15borderRadius: BorderRadius.circular(50),// 设置裁剪行为 , 抗锯齿clipBehavior: Clip.antiAlias,// 设置 PageView 组件child:PageView(// 设置 PageView 中封装的若干组件children: <Widget>[// 第一个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.green),// 显示的主要文字child: Text("页面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.red),// 显示的主要文字child: Text("页面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.black),// 显示的主要文字child: Text("页面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],),
),
二、 完整代码示例
完整代码示例 :
import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget {@override_LayoutPageState createState() => _LayoutPageState();
}class _LayoutPageState extends State<LayoutPage> {/// 当前被选中的底部导航栏索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本组件样式 , 可以设置给 Text 文本组件// 设置字体大小 20, 颜色红色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: '布局组件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 顶部标题栏appBar: AppBar(title: Text('布局组件示例'),),// 底部导航栏 BottomNavigationBar 设置// items 可以设置多个 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 设置当前选中的底部导航索引currentIndex: _currentSelectedIndex,// 设置点击底部导航栏的回调事件 , index 参数是点击的索引值onTap: (index){// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引// 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡setState(() {// 改变 int _currentSelectedIndex 变量的状态_currentSelectedIndex = index;});},// 条目items: [// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.home, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.home, color: Colors.red,),// 设置标题title: Text("主页")),// 设置底部导航栏条目, 每个条目可以设置一个图标BottomNavigationBarItem(// 默认状态下的图标icon: Icon(Icons.settings, color: Colors.grey,),// 激活状态下的图标activeIcon: Icon(Icons.settings, color: Colors.red,),// 设置标题title: Text("设置"))],),// 设置悬浮按钮floatingActionButton: FloatingActionButton(onPressed: (){print("悬浮按钮点击");},child: Text("悬浮按钮组件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器组件RefreshIndicator(// 显示的内容child: ListView(children: <Widget>[Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("主页面选项卡, 下拉刷新"),// 水平方向排列的线性布局Row(children: <Widget>[// 原始图片, 用于对比Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),// 圆形裁剪组件 , 将 child 布局裁剪成圆形ClipOval(// 使用 SizedBox 组件约束布局大小child: SizedBox(width: 100,height: 100,// 使用 SizedBox 约束该 Image 组件大小child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"),),),Padding(// 设置内边距 5padding: EdgeInsets.all(15),// 方形裁剪组件 , 将组件裁剪成方形child: ClipRRect(// 设置裁剪圆角, 四个角设置半径为 10 的圆角borderRadius: BorderRadius.all(Radius.circular(10)),// 修改透明度组件 , 这里设置 50% 透明度child: Opacity(opacity: 0.5,// 设置 100x100 大小的图片组件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),),),),],),// 设置一个布局容器 , 用于封装 PageView 组件Container(// 设置高度height: 200,// 设置边距margin: EdgeInsets.all(15),// 设置装饰, 背景深橙色decoration: BoxDecoration(color: Colors.white),// 设置子组件 PageView 的裁剪组件child:PhysicalModel(color: Colors.transparent,// 设置圆角半径 15borderRadius: BorderRadius.circular(50),// 设置裁剪行为 , 抗锯齿clipBehavior: Clip.antiAlias,// 设置 PageView 组件child:PageView(// 设置 PageView 中封装的若干组件children: <Widget>[// 第一个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.green),// 显示的主要文字child: Text("页面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.red),// 显示的主要文字child: Text("页面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三个页面组件Container(// 设置居中方式 , 居中显示alignment:Alignment.center,// 设置装饰器 , 绿色背景decoration: BoxDecoration(color: Colors.black),// 显示的主要文字child: Text("页面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],),),),],),),],),// 刷新时回调的方法// 列表发生下拉操作时, 回调该方法// 该回调是 Future 类型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 对应底部导航栏设置选项卡// 设置容器的装饰器 , BoxDecoration 是最常用的装饰器// 可以自行查看 BoxDecoration 中可以设置的属性decoration: BoxDecoration(color: Colors.white),// 设置 child 子组件居中方式, 居中放置alignment: Alignment.center,// 子组件, 子组件设置为一个 Column 组件child: Column(// Column 子组件, 这里设置 Text 文本组件children: <Widget>[Text("设置页面选项卡")],),) , // 该设置与 _currentSelectedIndex == 0? 相对应, ?: 三目运算符),);}/// RefreshIndicator 发生下拉操作时, 回调该方法/// 该方啊是一个异步方法 , 在方法体前添加 async 关键字Future<Null> _refreshIndicatorOnRefresh() async{// 暂停 500 ms , 使用 await 关键字实现// 在这 500 ms 之间 , 列表处于刷新状态// 500 ms 之后 , 列表变为非刷新状态await Future.delayed(Duration(milliseconds: 500));return null;}}运行效果展示 :
三、 相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
博客源码下载 :
GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )相关推荐
- Flutter页面布局：Wrap组件
Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Column 表现几乎一致.但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,ma ...
- 【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )
文章目录 一.Flutter 布局相关的组件简介 二.Row 和 Column 组件 三.SizedBox 组件 四.ClipOval 组件 五. 完整代码示例 六. 相关资源 一.Flutter 布 ...
- 【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
文章目录 一.Flutter 组件回顾 二.Center 组件 三.Wrap 组件 四.ClipRRect 组件 五.Stack 组件与 Positioned 组件 六.按钮组件组合 七.完整代码示例 ...
- 【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )
文章目录 一.Wrap 组件 二.Expanded 组件 三.完整代码示例 四.相关资源 一.Wrap 组件 Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是 ...
- 【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
文章目录 一.FractionallySizedBox 组件 二.Stack 布局组件 三.Positioned 组件 四. 完整代码示例 五. 相关资源 一.FractionallySizedBox ...
- 【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )
文章目录 前言 一.移除顶部状态栏空白 二.帧布局组件 三.透明度组件 四.监听滚动事件 五.完整代码示例 六.相关资源 前言 在上一篇博客 [Flutter]Banner 轮播组件 ( flutte ...
- Flutter基础布局组件及实现
https://www.cnblogs.com/lxlx1798/p/11084904.html 一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Paddi ...
- Flutter组件--重叠布局/相对布局(Stack,Positioned组件)
1.Flutter Stack组件 Stack表示堆的意思,我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位布局 属性 说明 alignment ...
- 开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
最新文章
- 漫画：五分钟学会贪心算法！
- linux下多线程的调试
- golang设计模式之原型模式
- js bool true false 真假比较
- 别人家的程序员是如何使用 Java 进行 Web 抓取的？
- vs.net打包生成可执行文件的方法
- c语言 称重系统设计,基于L—PSIII的电子称重系统的设计
- 计算机系统动态库修复,xp系统恢复dll动态链接库的修复步骤
- 鼎捷ERP易飞9.0.8实战课程-卓致羽-专题视频课程
- 我要开始记单词啦（定时记录背单词历程）
- 工控ARM板登陆、wifi连接
- PHP在线发信投稿系统网站程序
- kubernetes的DevOps业务(一)：Jenkins，GitLab，Harbor，Tekton，GitOps
- java jsoup jar包_jsoup jar包
- 如何确认EasyNVR拉转推视频流到EasyDSS播放出现掉帧的问题？
- 友盟的Common的包下载失败，报错Forbidden
- USGS的*.dem格式的高程DEM怎么打开和转换格式
- [Angular实战网易云]——20、歌单详情
- TypeScript常用基础语法学习
- 投资组合 有效边界的求解 matlab,Markowitz投资组合有效边界的实现——基于Matlab的实例分析...