flutter学习之基础组件（一）
2024-04-08 23:06:17
flutter学习之基础组件（一）
主要学习Center 组件、Text 组件、MaterialApp 组件、Scaffold 组件、Image组件(以代码为主)
文章目录
- flutter学习之基础组件（一）
- 一、Flutter 目录结构
- 二、Flutter 入口文件、入口方法
- 三、Center 组件
- 四、自定义组件
- 五、件用 MaterialApp、Scaffold、Container、Text组件装饰App
- 1.MaterialApp
- 2.Scaffold
- 3.Text
- 4.Container
- 六、图片组件Imgae
- 1.Image介绍
- 2.Image加载网络图片
- 3.Image加载本地图片
- 4.Image设置圆角图片-使用Container的特性 画圆实现
- 5.Image设置圆角图片-使用原生组件ClipOval实现
一、Flutter 目录结构
主要几个文件夹的作用
二、Flutter 入口文件、入口方法
每创建一个flutter项目，lib目录下都有一个 main.dart 文件，这个文件就是flutter的入口文件，执行方法runApp就可以把代码运行到手机或者模拟器上
void main(){ runApp(MyApp());
}
也可以简写
void main()=>runApp(MyApp());
三、Center 组件
import 'package:flutter/material.dart';
void main(){runApp(Center( child: Text(
"我是一个文本内容", textDirection: TextDirection.ltr,
),
));
}
四、自定义组件
在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget。
StatelessWidget 是无状态组件，状态不可变的 widget
StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement build return Center(child:Text("我是一个文本内容", textDirection: TextDirection.ltr,textDirection: TextDirection.ltr, style: TextStyle(fontSize: 40.0,fontWeight: FontWeight.bold, // color: Colors.yellowcolor: Color.fromRGBO(255, 222, 222, 0.5)),);}
}
五、件用 MaterialApp、Scaffold、Container、Text组件装饰App
1.MaterialApp
MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用
常用的属性：home（主页） title（标题） color（颜色） theme（主题）routes（路由）
2.Scaffold
Scaffold是Material Design 布局结构的基本实现 。此类提供了用于显示drawer 、 snackbar和底部sheet的API。
Scaffold 有下面几个主要属性：appBar - 显示在界面顶部的一个AppBar。body - 当前界面所显示的主要内容Widget。 drawer - 抽屉菜单控件。
3.Text
下面是TextStyle的参数：
4.Container
import 'package:flutter/material.dart';/*** Container组件 和 Text组件*/
class TestOne extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("flutter demo"),),body: HomeContent()),);}
}class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(// child: Text("你好 flutter"),child: Container(child: Text("你好 flutter fdssddfd是豆腐干豆腐干大范甘迪豆腐干豆腐干d",textAlign: TextAlign.center,//位置style: TextStyle(fontSize: 20.0,color: Colors.cyan,fontWeight: FontWeight.bold,//设置字体加粗fontStyle: FontStyle.italic,//设置字体倾斜decoration: TextDecoration.lineThrough,decorationColor: Colors.white,decorationStyle: TextDecorationStyle.dashed,letterSpacing: 5.0, //字间距),overflow: TextOverflow.clip,//设置文字超出一行的属性maxLines: 2,textScaleFactor: 1.2, //设置字体显示倍率),height: 300.0,width: 200.0,//设置背景颜色decoration: BoxDecoration(color: Colors.yellow,//边框颜色border: Border.all(color: Colors.blue, width: 2.0),borderRadius: BorderRadius.all(// Radius.circular(150) //圆形Radius.circular(20)), //设置圆角),// padding: EdgeInsets.all(5.0),padding: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 5.0),// transform: Matrix4.translationValues(20, 10, 10), //设置动画.alignment: Alignment.center, //设置位置),);}
}
六、图片组件Imgae
1.Image介绍
图片组件是显示图像的组件，Image 组件有很多构造函数，这里我们只给大家讲两个
Image.asset， 本地图片
Image.network 远程图片
Image 组件的常用属性:
2.Image加载网络图片
//加载网络图片
class HomeContents extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: Image.network("https://img0.baidu.com/it/u=2878754786,2292453248&fm=26&fmt=auto&gp=0.jpg",alignment: Alignment.bottomCenter,//设置图片位置color: Colors.cyan,//设置图片显示属性colorBlendMode: BlendMode.color,fit: BoxFit.contain,//设置图片显示方式 cover拆解全屏repeat: ImageRepeat.repeat, //平铺),width: 300,height: 300,decoration: BoxDecoration(color: Colors.yellow,),),);}
}
3.Image加载本地图片
/*** 加载本地图片* 1创建assets文件夹，并且在里面创建2.0x 3.0x 文件夹，分别放入对应同一张尺寸大小不一样的图片* 2在pubspec.yaml 文件assents下配置图片路径* assets:- assets/images/- assets/2.0x/- assets/3.0x/*/
class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: Image.asset("assets/images/icon_5.webp",alignment: Alignment.bottomCenter, //设置图片位置// color: Colors.cyan, //设置图片显示属性colorBlendMode: BlendMode.color,fit: BoxFit.contain, //设置图片显示方式 cover拆解全屏repeat: ImageRepeat.repeat, //平铺),width: 300,height: 300,decoration: BoxDecoration(color: Colors.yellow,),),);}
}
4.Image设置圆角图片-使用Container的特性 画圆实现
/*** 圆形图片--第一种方法 使用Container的特性 画圆实现*/
class CircularImage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(height: 300,width: 300,decoration: BoxDecoration(color: Colors.deepOrange,borderRadius: BorderRadius.circular(150),image: DecorationImage(image: NetworkImage("https://img0.baidu.com/it/u=1425165859,2689717355&fm=26&fmt=auto&gp=0.jpg"),fit: BoxFit.cover)),),);}
}
5.Image设置圆角图片-使用原生组件ClipOval实现
/*** 圆形图片--第二种方法 使用原生组件ClipOval实现，根据图片大小处理*/
class CircularImages extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: ClipOval(child: Image.network("https://img0.baidu.com/it/u=2878754786,2292453248&fm=26&fmt=auto&gp=0.jpg",width: 300,height: 300,fit: BoxFit.cover,),),),);}
}
flutter学习之基础组件（一）相关推荐
- flutter学习(3)图片组件
flutter学习(3)图片组件 文章目录 flutter学习(3)图片组件 一.远程图片 二.Flutter实现圆角以及实现圆形图片 法一 法二(较简单) 三.本地图片 1.新建目录结构 2.修改p ...
- Flutter学习-自定义搜索栏组件（非AppBar）
参数说明 参数 默认值 说明 height 50.0 搜索栏高度 hintText 搜索 搜索栏初始提示 backgroundColor Colors.white 背景色 fontSize 18 文字 ...
- Flutter学习 Widget简介
目录 1. Widget 概述 1.1 Widget概念 1.2 Widget 分类 2. Widget 接口 3. StatelessWidget 和 StatefulWidget 3.1 Flut ...
- Flutter学习之认知基础组件
一.前言 前一天,学习了Dart语法,对Dart的语法和特性有了更深一步的了解.今天,来学习Flutter的基础控件,身为Android开发者都知道,一开始入坑Android就要熟悉学习其控件,如:T ...
- Flutter(四)——基础组件
本文目录 前言 基础组件 Text 常用属性使用 Icon Image Button FlutterLogo 前言 你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLa ...
- 一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
- Flutter 基础组件之 Text
终于安装好了 Flutter 的环境,既然入了坑,就一点一点学吧,Flutter 可以说一切皆组件吧,所以要熟练掌握各个基础组件的 API,然后才能在面对复杂需求的时候才能得心应手的将各个组件组合起来 ...
- Flutter学习-基础Widget
Flutter学习-基础Widget 1. Flutter编程范式 1.1 编程范式的理解 1.2 flutter的编程范式 2. Text Widget 2.1 普通文本展示 2.2 富文本 2.3 ...
- Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
最新文章
- springboot之异步调用@Async
- 移动端给img加上max-width:100%
- 编程之美-寻找最近点方法整理
- wuhan2020：武汉新型冠状病毒防疫开源信息收集平台
- OpenCV线性搅拌机linear blender的实例(附完整代码)
- 【渝粤教育】国家开放大学2018年秋季 1063t现代货币金融学说 参考试题
- 哔哩哔哩swot分析_哔哩哔哩2020校园招聘游戏运营笔试真题
- 外设驱动库开发笔记9：SHT1x系列温湿度传感器驱动
- 2014 android 应用开发大赛,2014年全国高校移动互联网应用开发创新大赛
- java 获取服务器IP地址及MAC地址
- Eclipse安装应知应会
- dl360 g7安装linux,HPDL360G7服务器安装说明.ppt
- Linux基础四---系统监控硬盘分区
- atitit.软件与sql设计模式原理与本质 大总结attialx总结v6 qc26.docx
- NumberFormat
- 计算机学院军训口号大全团队,关于霸气押韵的军训口号大全
- uniapp 电商小程序 置顶特效/分享特效/红包特效 简单实现效果
- nfs总结之工作原理
- frp内网穿透疑难杂症【1】do http proxy request [host:www.xxx.xxx] error: no root found: www.xxx.xxx
- 在PCB板上调试104（0.1μF）独石电容驱动MAXIM MAX3232串口芯片的心得