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,一经查实,立即删除!

相关文章

int和byte数组相互转换详解

转换之前我们需要了解各种进制之间的关系&#xff0c;不太了解的可以先看下计算机组成原理和体系 这篇文章 byte byte是字节的意思&#xff0c;一个字节等于8位&#xff0c;范围是 0000 0000 ~ 1111 1111(十六进制&#xff1a;0x0~0xff),总共包含256个数。 有符号的byte表示的…

java 和 php 的AES 128位 256位 加解密 【java解密php的AES加密方案】

项目需要 需要java可以解密 php加密的 字符串 &#xff0c; 使用的方法是 AES128位加解密 坑一踩完 &#xff0c;还是直接上代码 package com.xxx.init.utils;import com.xxx.init.utils.BaseDataUtil; import com.xxx.init.exception.xxxRuntimeException; import com.xxx.i…

ARCGIS PRO SDK POINT层唯一值渲染按角度旋转

c 代码: 按Direction字段旋转&#xff0c;旋转样式为数学 protected override async void OnClick(){var featLayer MapView.Active.Map.GetLayersAsFlattenedList().OfType<FeatureLayer>().First();await QueuedTask.Run(() >{var render featLayer.GetRenderer()…

Python异步编程详解:asyncio和多线程

Python 的异步编程是一种通过协程、事件循环和异步I/O操作来实现并发的技术。在 Python 中&#xff0c;asyncio 是用于编写单线程并发代码的库&#xff0c;而多线程则涉及使用 Python 的 threading 模块。下面我们将详细探讨这两种技术的使用和它们的适用场景。 ### 1. asynci…

6 Zookeeper 配置说明

Zookeeper 的三种工作模式 单机模式:存在单点故障。集群模式:在多台机器上部署 Zookeeper 集群,适合线上环境使用。伪集群模式:在一台机器同时运行多个 Zookeeper 实例,仍然有单点故障问题,当然其中配置的端口号要错开的,适合实验环境模拟集群使用。Zookeeper 的三种端口…

C 练习实例36 - 求100之内的素数

C 练习实例36 - 求100之内的素数 题目&#xff1a; 求100之内的素数。 程序分析&#xff1a; 质数&#xff08;prime number&#xff09;又称素数&#xff0c;有无限个。一个大于1的自然数&#xff0c;除了1和它本身外&#xff0c;不能被其他自然数整除。 程序源代码&#x…

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;通过整合微信…

python_AI库 matplotlib在AI程序中的应用介绍

本文默认读者具备以下技能&#xff1a; 熟悉Python基础知识&#xff0c;能自行阅读并理解代码含义 对AI有基础了解 基础高等数学知识 前文对matplotlib在日常生活的基础应用作了介绍&#xff0c;那么matplotlib与我们的AI又有什么联系呢&#xff1f; 在 AI 程序中&#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;说明了企业投…

K8s: 持久化存储之卷, NFS卷

卷 Volume 1 ) 概述 容器中的文件在磁盘上是临时存放的&#xff0c;这给容器中运行的特殊应用程序带来一些问题 首先&#xff0c;当容器崩溃时&#xff0c;kubelet 将重新启动容器&#xff0c;容器中的文件将会丢失——因为容器会以干净的状态重建其次&#xff0c;当在一个 Po…

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

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;不用…

Windows设置右键打开管理员CMD

参考方法&#xff1a;Windows设置右键打开CMD - 知乎 (zhihu.com) 按参考方法创建右键CMD&#xff0c;在command默认项的数值数据中填入 powershell.exe -Command "Start-Process cmd -ArgumentList /s,/k,pushd \"%V\" -Verb RunAs"