flutter笔记-主要控件及布局

文章目录

  • 1. 富文本实例
  • 2. Image
    • 2.1 本地图片
    • 2.2 网络图片
  • 笔记
  • 3. 布局
  • 4. 滑动相关view
    • 4.1 GridView类似九宫格view
    • 4.2 ListView

关于widget的生命周期的相关知识这里就不做介绍,和很多语言类似;

1. 富文本实例

Dart中使用richtext,示例如下:

const Text.rich(textAlign:TextAlign.center,TextSpan(text: '生于忧患,死于安乐\n',style: TextStyle(color: Colors.red, fontSize: 18),children: [TextSpan(text: '孟子及其弟子〔先秦〕',style: TextStyle(color: Colors.blueGrey,fontSize: 10),),WidgetSpan(child:Icon(Icons.face,color: Colors.red)),TextSpan(text: """\n    舜发于畎亩之中,傅说举于版筑之间,胶鬲举于鱼盐之中,管夷吾举于士,孙叔敖举于海,百里奚举于市。故天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能。\n(是人 一作:斯人)\n    人恒过,然后能改;困于心,衡于虑,而后作;征于色,发于声,而后喻。入则无法家拂士,出则无敌国外患者,国恒亡。然后知生于忧患而死于安乐也。""",style: TextStyle(color: Colors.black,fontSize: 13))],),)

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

2. Image

图片类主要用的有两种一种是加载本地的图片,一种是网络的。其他的图片类如下:
在这里插入图片描述
上图是在类中点击后:command + B或option + command + B,就会出现所有的子类实现;

2.1 本地图片

本地的图片加载比较复杂:

  • 需要新建文件夹assets/images目录,
  • 然后修改pubspec.yaml文件:找到flutter:配置项目新增:
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: trueassets:- assets/images/*
  • 最后执行flutter pub get
  • 图片加载如下:
  const Image(image: AssetImage("assets/images/desktop.jpg"),width: 200,fit: BoxFit.cover,)

2.2 网络图片

网络图片的使用比较简单:Image(image: NetworkImage("https://uri"));

笔记

记录一个快捷键,比如下面的代码:

class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text("计数器"),),body: _MyHomeContent(),);}
}

我们想在AppBar外面加一个Center的wedge;mac上选中AppBar后按option(alt)+enter就会出现如下图的选项:
在这里插入图片描述
选中任意一个就会自动添加;

3. 布局

Dart中使用最多就是Container,Align,edge设置内边距;

  1. container使用如下:
class _MyHomeContentState extends State<_MyHomeContent> {int _counter = 0;Widget build(BuildContext context) {return  Container(width: 200,height: 200,alignment: Alignment(0.5,0.5),padding: EdgeInsets.all(50),margin: EdgeInsets.all(10),decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(10),),child: const Column(children: [Icon(Icons.people,color: Colors.orange,),],),);}
}
  1. align如下:
class _MyHomeContentState extends State<_MyHomeContent> {int _counter = 0;Widget build(BuildContext context) {return const Align(alignment: Alignment(0.5, 0.5),child: Icon(Icons.people,color: Colors.orange,),);}
}

Row 和 Column 布局这里不做分析;
补充Positioned和Stack使用:示例如下:

 class _MyHomeContentState extends State<_MyHomeContent> {int _counter = 0;Widget build(BuildContext context) {return Stack(children: <Widget>[Image.asset("assets/images/desktop.jpg", width: 300),Positioned(left: 0,right: 0,bottom: 0,child: Container(padding: const EdgeInsets.all(10),color: const Color.fromARGB(160, 0, 0, 0),child: Row(// 控件平分剩余空间mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [const Text("这个图片很合适",style: TextStyle(fontSize: 20, color: Colors.white),),IconButton(onPressed: () {print("俺就点击了。。。。。。");},icon: const Icon(Icons.favorite_border,color: Colors.white,))],),))],);}
}

效果如下图:

在这里插入图片描述

4. 滑动相关view

4.1 GridView类似九宫格view

使用如下:

class _MyHomeContentState extends State<_MyHomeContent> {bool _isFavorite = false;Widget build(BuildContext context) {return GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,crossAxisSpacing: 10,mainAxisSpacing: 10,),children:List.generate(9, (index) {return Container(width: 40,height: 40,child: Image.asset(index%2==0?"assets/images/img1.png":"assets/images/img2.png"),);}));}
}

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

4.2 ListView

这里主要介绍有分隔线的使用:

class _MyHomeContentState_list2 extends State<_MyHomeContent> {bool _isFavorite = false;Widget build(BuildContext context) {return ListView.separated(itemCount: 100,itemBuilder: (context, index) {return ListTile(leading: Container(width: 50,height: 50,// decoration: BoxDecoration(//   shape: BoxShape.circle,//   color: Colors.blue,// ),child: Image.asset(index%2==0?"assets/images/img1.png":"assets/images/img2.png"),),title: Text("姓名${index}"),subtitle: Text("生日"),trailing: Icon(Icons.favorite),onTap: (){setState(() {_isFavorite = !_isFavorite;});},);},separatorBuilder: (context, index) {return const Divider(thickness:0.5,indent:10,endIndent: 10,height: 1,color: Colors.grey,);});}
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4355.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3+Vite开发的项目进行加密打包

本文主要介绍Vue3+Vite开发的项目如何进行加密打包。 目录 一、vite简介二、混淆工具三、使用方法1. 安装插件:2. 配置插件:3. 运行构建:4. 自定义混淆选项:5. 排除文件:下面是Vue 3+Vite开发的项目进行加密打包的方法。 一、vite简介 Vite 是一个由 Evan You 创造的现代…

XBoot:基于Spring Boot 2.x的一站式前后端分离快速开发平台

XBoot&#xff1a;基于Spring Boot 2.x的一站式前后端分离快速开发平台 摘要 随着信息技术的迅速发展&#xff0c;快速构建高质量、高可靠性的企业级应用成为了迫切需求。XBoot&#xff0c;作为一个基于Spring Boot 2.x的一站式前后端分离快速开发平台&#xff0c;通过整合微信…

针对icon报错

针对上篇文章生成图标链接中图标报错 C# winfrom应用程序添加图标-CSDN博客 问题&#xff1a;参数“picture”必须是可用作Icon的参数 原因&#xff1a;生成的ico图标类型不匹配 解决方法&#xff1a; 更改导出的ico类型

iOS - 多线程-读写安全

文章目录 iOS - 多线程-读写安全1. 多读单写1.1 场景1.2 实现方案1.2.1 pthread_rwlock&#xff1a;读写锁1.2.1.1 示例 1.2.2 dispatch_barrier_async&#xff1a;异步栅栏调用1.2.2.1 示例 iOS - 多线程-读写安全 假设有一个文件&#xff0c;A线程进行读取操作&#xff0c;B…

数智时代的AI人才粮仓模型解读白皮书(2024版)

来源&#xff1a;极客邦科技 自 2023 年上半年起&#xff0c;ChatGPT 等大模型技术蓬勃发展&#xff0c;AI 技术不断突破边界&#xff0c;展现 出惊人的潜力和发展速度。从早期的逻辑推理、专家系统&#xff0c;到如今的深度学习、神经网络&#xff0c; AI 技术显著缩小了科学…

ASP.NET企业投资价值分析系统

摘 要 本文将影响股票投资价值的宏观因素、行业因素、企业内部等诸多因素予以量化分析&#xff0c;对钢铁板块和汽车板块各上市公司进行综合评估&#xff0c;为广大股民的投资方向和资金安全提供了有力的支持。本文还阐述了企业投资价值分析的必要性&#xff0c;说明了企业投…

分类算法——模型评估(八)

1混淆矩阵 在分类任务下&#xff0c;预测结果与正确标记之间存在四种不同的组合&#xff0c;构成混淆矩阵&#xff08;适用于多分类&#xff09; TP True Possitive FN False Negative 2精确率&#xff08;Precision&#xff09;与召回率&#xff08;Recall&#xff09; 精…

mysql-sql-练习题-2

日期topN 日期最值 topN 任意区间topN 每年温度top2建表排名函数万能公式&#xff08;条关&#xff09; 任意区间 各科第1,3,5名排名函数万能公式 日期 本周过生日 -- 本周表示 加减日期 格式化 拼接 select * from student where date_format(s_age,concat(year(curdate()),…

微信小程序开发六(自定义组件)

自定义组件的创建&#xff1a; 如何创建&#xff1a; 右键选择新建component 创建完成之后需要打开app.json&#xff0c;这是全局使用这个组件&#xff0c;想要单独的页面使用&#xff0c;就在当前页面的json文件中定义 "usingComponents": {"my-zj": &quo…

冰箱主控 32位MCU,多通道、高精度的AD采样配合温度传感器,实现冰箱各温室的精确控温;低功耗设计

概览 小华高性价比32位MCU&#xff0c;多通道、高精度的AD采样配合温度传感器&#xff0c;实现冰箱各温室的精确控温&#xff1b;低功耗设计&#xff0c;绿色低碳、节能环保&#xff1b;模块化设计&#xff0c;充分利用丰富的通讯接口&#xff0c;使主控板、显示板和驱动板灵活…

远程连接docker,实现本地发布版本到服务器

最近在学jenkins的时候&#xff0c;发现涉及到了docker的远程发布调用。后续应该还要自己搭建一个docker的本地仓库。 简单描述一下具体是如何实现的&#xff1a; 1、将docker的服务器开启2375端口&#xff08;注意&#xff0c;这里的开启是将端口直接暴露出去&#xff0c;不用…

38-1 防火墙了解

一、防火墙的概念: 防火墙(Firewall),也称防护墙,是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网(US5606668 [A]1993-12-15)。它是一种位于内部网络与外部网络之间的网络安全系统,是一项信息安全的防护系统,依照特定的规则,允许或是限制传输的数据通过。…

移远通信推出“全系统+全频段”GNSS定位模组LG290P,赋能高精度导航应用

近日&#xff0c;全球领先的物联网整体解决方案供应商移远通信正式对外宣布&#xff0c;其将推出全新款支持“全系统全频段”的工规级RTK高精度GNSS定位模组LG290P&#xff0c;用于满足智能机器人、无人机、精准农业、测量测绘等高精度定位应用场景所需。 高精度 LG290P 作为移…

Ubuntu+Systemd服务+实现开机自启/关机启动脚本

开机自启 1.创建一个新的 systemd 服务文件 现在随便一个地方创建txt文档 如果想要启动sh脚本&#xff0c;就把下面的代码输入到txt文档中 [Unit] DescriptionRun Python script on specific executable run Afternetwork.target[Service] Typesimple ExecStart/home/tech/…

记录些AI Agents设计模式和NL2SQL知识

吴恩达分享的四种 自我反思&#xff08;Reflection&#xff09;&#xff1a;可以自我修正&#xff1b;使用工具&#xff08;Tool Use&#xff09;&#xff1a;链接其他系统去做一些事情&#xff0c;比如把电脑里面的未归档文件做好归档&#xff1b;规划&#xff08;Planning&a…

红米K40手机刷机详解

了解什么是卡刷、什么是线刷 卡刷&#xff0c;就是把系统包放到你手机的SD卡&#xff0c;这一步&#xff0c;不用手机解BL锁&#xff0c;不用root&#xff0c;直接小米助手下载就可以刷。线刷就是用数据线连接电脑&#xff0c;通过XiaoMiFlash直接刷到手机&#xff0c;这一步权…

Pytorch实现线性回归模型

在机器学习和深度学习的世界中&#xff0c;线性回归模型是一种基础且广泛使用的算法&#xff0c;简单易于理解&#xff0c;但功能强大&#xff0c;可以作为更复杂模型的基础。使用PyTorch实现线性回归模型不仅可以帮助初学者理解模型的基本概念&#xff0c;还可以为进一步探索更…

WebSocket 深入浅出

WebSocket 深入浅出 1. WebSocket 是什么2. WebSocket 建立连接通信的过程3. WebSocket 和http的联系与区别4. WebSocket 的使用场景及限制 1. WebSocket 是什么 定义&#xff1a;WebSocket 是一种网络通信协议&#xff0c;它允许在单个TCP连接上进行全双工通信。是HTML5规范提…

电商技术揭秘三十七:电商智能风控业务架构设计

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘二十八&#xff1a;安全与合规性保障 电商技术揭秘二十九&#xff1a;电商法律合规浅析 电商技术揭秘三十&#xff1a;知识产权保…

无人机+激光雷达:高精度测绘级实时点云激光雷达技术详解

在现代测绘技术中&#xff0c;无人机与激光雷达的结合已经成为一种重要的技术手段。激光雷达&#xff08;LiDAR&#xff09;是一种主动式航空传感器&#xff0c;通过发射激光束并探测其与目标物体的反射&#xff0c;可以获取目标物体的位置、速度等特征信息。而无人机则作为一种…