热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

flutter常见的基础组件(一)

flutter1.Text文本组件Text('czklove',文本上的文字style:TextStyle(style代表对文字的描述fontSize:18,文

flutter

  1.Text 文本组件 

Text(
'czklove', //文本上的文字
style: TextStyle(
// style 代表对文字的描述
fontSize: 18, //文字的大小
fontWeight: FontWeight.bold, //文字的粗细
fontFamily: "" //和html 上的一样
),
maxLines: 1, // 文本最多显示行数
overflow: TextOverflow.ellipsis, //超出的文本处理方式,裁剪or隐藏
textAlign: TextAlign.right //要配合center组件使用
);

  2 center 组件

Center(
child: Text('czklove'),
widthFactor: 2, //宽度系数
heightFactor: 2, //高度系数
);

  3 Container 容器组件

return Container(
width: 200, // 宽度
height: 300, //高度
color: Colors.pink, //背景颜色 会填充padding
child: Text('czklove'), //子组件
alignment: Alignment.bottomCenter, //内部子组件对其方式
padding: EdgeInsets.all(10), // padding 包括在width 里
margin: EdgeInsets.all(15),
);

  4.Row和Column 行组件和列组件 Row行组件,一行排列, Column 列组件,多列排列,单行只有一个元素

Container(child:Homecontent(),height: 300,)
class Homecontent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Row( //默认高度沾满整个父容器 宽度自适应
children: [
Text('czklvoe'),
Container(
height: 300,
child: Text('czklove-Container'),
color: Colors.pink,
),
Center(child: Text('czklove-center'))
],
mainAxisAlignment: MainAxisAlignment.end, //主轴上右对齐
crossAxisAlignment:CrossAxisAlignment.start // 负轴上上对其
);
}
}

class Homecontent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column( //默认高度沾满整个父容器 宽度自适应
children: [
Text('czklvoe'),
Container(
height: 230,
child: Text('czklove-Container'),
color: Colors.pink,
),
Center(child: Text('czklove-center'))
],
mainAxisAlignment: MainAxisAlignment.end, //主轴上右对齐
crossAxisAlignment:CrossAxisAlignment.start // 负轴上上对其
);
}
}

  5.Image 图片组件 分远程图片和本地图片(注本地图片配置特别麻烦,这里只写远程图片展示)

return Image.network(
'http://p3.music.126.net/g5MsN6NwYPHBKtiMaDG8_g==/109951163069746537.jpg?param=200y200',//远程图片地址
fit: BoxFit.cover,// 填充完 默认按源大小展示
width: 200,
height: 200, //写了填充宽高基本上就没用了
);

  图片裁剪  CircleAvatar默认是裁剪成圆

Container(child:Homecontent(),width: 300,height: 300,)
class Homecontent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return CircleAvatar(
backgroundImage: NetworkImage(
'http://p3.music.126.net/g5MsN6NwYPHBKtiMaDG8_g==/109951163069746537.jpg?param=200y200',
),
);
}
}

  6.Icon 组件,图标组件

Icon(
Icons.home, // 图标类型
color: Colors.pink, // 图标颜色
size: 36 // 图标大小
);

  7.listview 列表组件 listtile 标题组件

ListView(
children: [
ListTile(
title: Text('czlove'), //大标题
subtitle: Text('czlove1111111111'), //副标题
leading: Icon(Icons.home,size: 36), //左侧图标
)
],
);

  8. Appbar 顶部应用程序栏组件

appBar: AppBar(
leading: Icon(Icons.keyboard_arrow_left), // <图标
title: Text('czklove'),
actions: [ //右上角列表
Text('czcz'),
Text('zxczzxc')
],
flexibleSpace: Text('flexibleSpace'), //最左上角
centerTitle: true //标题是否居中
),

 


推荐阅读
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 掌握Android UI设计:利用ZoomControls实现图片缩放功能
    本文介绍了如何在Android应用中通过使用ZoomControls组件来实现图片的缩放功能。ZoomControls提供了一种简单且直观的方式,让用户可以通过点击放大和缩小按钮来调整图片的显示大小。文章详细讲解了ZoomControls的基本用法、布局设置以及与ImageView的结合使用方法,适合初学者快速掌握Android UI设计中的这一重要功能。 ... [详细]
  • 开发笔记:深入解析Android自定义控件——Button的72种变形技巧
    开发笔记:深入解析Android自定义控件——Button的72种变形技巧 ... [详细]
  • 本文介绍了在 Java 编程中遇到的一个常见错误:对象无法转换为 long 类型,并提供了详细的解决方案。 ... [详细]
  • 本文详细解析了 Yii2 框架中视图和布局的各种函数,并综述了它们在实际开发中的应用场景。通过深入探讨每个函数的功能和用法,为开发者提供了全面的参考,帮助他们在项目中更高效地利用这些工具。 ... [详细]
  • 本文详细介绍了如何利用CSS技术对链接下划线进行个性化定制和美化,涵盖了多种实用技巧和方法。通过对CSS属性的灵活运用,可以实现不同风格的下划线效果,提升网页的视觉体验。文中不仅提供了基础的代码示例,还结合实际案例进行了深入解析,帮助读者更好地理解和应用这些技巧。此外,文章还引用了《CSS2.0中文手册》中的相关内容,增加了技术的权威性和实用性。 ... [详细]
  • 技术分享:深入解析GestureDetector手势识别机制
    技术分享:深入解析GestureDetector手势识别机制 ... [详细]
  • Android 图像色彩处理技术详解
    本文详细探讨了 Android 平台上的图像色彩处理技术,重点介绍了如何通过模仿美图秀秀的交互方式,利用 SeekBar 实现对图片颜色的精细调整。文章展示了具体的布局设计和代码实现,帮助开发者更好地理解和应用图像处理技术。 ... [详细]
  • 在Android开发中,通过调用系统内置的音频和视频播放功能,可以实现高效、便捷的多媒体处理。本文将详细介绍如何利用Android系统的媒体播放器组件,实现对音频和视频文件的播放控制,包括基本的播放、暂停、停止等操作,以及如何处理播放过程中的各种事件,确保应用的稳定性和用户体验。 ... [详细]
  • 利用python爬取豆瓣电影Top250的相关信息,包括电影详情链接,图片链接,影片中文名,影片外国名,评分,评价数,概况,导演,主演,年份,地区,类别这12项内容,然后将爬取的信息写入Exce ... [详细]
  • 大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式
    大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式 ... [详细]
  • 在使用 Qt 进行 YUV420 图像渲染时,由于 Qt 本身不支持直接绘制 YUV 数据,因此需要借助 QOpenGLWidget 和 OpenGL 技术来实现。通过继承 QOpenGLWidget 类并重写其绘图方法,可以利用 GPU 的高效渲染能力,实现高质量的 YUV420 图像显示。此外,这种方法还能显著提高图像处理的性能和流畅性。 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • APKAnalyzer(1):命令行操作体验与功能解析
    在对apkChecker进行深入研究后,自然而然地关注到了Android Studio中的APK分析功能。将APK文件导入IDE中,系统会自动解析并展示其中各类文件的详细信息。官方文档提供了详细的命令行工具使用指南,帮助开发者快速上手。本文以一个RecyclerView的Adapter代理开源库为例,探讨了如何利用这些工具进行高效的APK分析。 ... [详细]
  • 使用PyQt5与OpenCV实现电脑摄像头的图像捕捉功能
    本文介绍了如何使用Python中的PyQt5和OpenCV库来实现电脑摄像头的图像捕捉功能。通过结合这两个强大的工具,用户可以轻松地打开摄像头并进行实时图像采集和处理。代码示例展示了如何初始化摄像头、捕获图像并将其显示在PyQt5的图形界面中。此外,还提供了详细的步骤说明和代码注释,帮助开发者快速上手并实现相关功能。 ... [详细]
author-avatar
dsafdasdfddsa_459
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有