01 container、Text组件

///01container、text组建import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('title'),),body: homeCenter()));}
}class homeCenter extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: Text('如果你想用Flutter开发app的话，你首先必须得会Dart。此教程由IT营大地老师录制，更新于2020年。 教程前14讲是Dart基础，第15讲开始讲的是Flutter。',textAlign: TextAlign.left,//align:对其 使其一致// overflow: TextOverflow.fade,maxLines: 6,textScaleFactor: 1, //字体放大2倍style: TextStyle(fontSize: 22.3, color: Colors.green, // color: Color.fromRGBO(122, 231, 133, 3.3),fontWeight: FontWeight.w800,//字体粗细fontStyle: FontStyle.italic,//字体倾斜decoration: TextDecoration.lineThrough,//装饰文本 这个是穿过文字的一个线decorationColor: Colors.white,//穿过去的线的颜色decorationStyle: TextDecorationStyle.solid,//是实心的还是许仙letterSpacing: 2.3,//单个字的艰巨 字母与字母之间的距离----中文比较多wordSpacing: 1.1,//单词与单词之间的艰巨),),height: 300.0,width: 300.0,// 注意这里 BoxDecoration 里面的修饰的都会少i个BorderRadiusGeometry的Geometry//减去Geometry之后才可以.decoration: BoxDecoration(//box的装饰color: Colors.yellow,border: Border.all(color: Colors.blue,width: 2.0,//线的粗细),borderRadius: BorderRadius.all(//设置边框圆角Radius.circular(20)//这里直接是用Radius.circular(20) 不能直接写数字),),// padding: EdgeInsets.all(20),//内艰巨padding: EdgeInsets.fromLTRB(10, 22, 31, 4),//坐上又下// transform: Matrix4.translationValues(100,20,0),//位移 这里是座椅100 下移20// transform: Matrix4.rotationZ(-0.2),//旋转 // transform: Matrix4.diagonal3Values(2, 3, 4),//缩放alignment: Alignment.bottomCenter,),);}
}

02 图片组件image

image的小标签
net的图片
圆形图片
本地图片

1.用的最多合集

fit: BoxFit.cover,//不拉伸充满战哥屏幕剪切 —不会变形【最多！！！】
alignment: Alignment.bottomCenter,//图片位置

2.圆形图片

头像

3.本地图片

的步骤：

新建images文件夹注意要有1x2x3x等等等等
在.yaml文件里面配置
在main中调用

///02 imageimport 'package:flutter/material.dart';
import 'package:myapp01/main%20copy.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('fluuuu'),),body: HomeContent(),),);}
}//圆形图片 clipOval【nice！！！
class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: ClipOval(child: Image.network('http://shp.qpic.cn/ishow/2735042809/1588039188_84828260_15570_sProdImgNo_7.jpg/0',width: 100,height: 100,fit: BoxFit.cover,),),),);}
}//实现圆形图片 [傻方法]
class HomeContent2 extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(width: 300.0,height: 300.0,decoration: BoxDecoration(borderRadius: BorderRadius.circular(150),image: DecorationImage(image: NetworkImage("http://shp.qpic.cn/ishow/2735052109/1590023062_84828260_20731_sProdImgNo_2.jpg/0",),fit: BoxFit.cover),color: Colors.yellow,border: Border.all(color: Colors.blue, width: 2.0)),),);}
}//图片image
class HomeContent1 extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(// child: Text('公孙离-祈雪灵祝'),child: Container(child: Image.network("http://shp.qpic.cn/ishow/2735020816/1612773126_84828260_2178_sProdImgNo_2.jpg/0",// alignment: Alignment.bottomCenter,//图片位置// color:  Colors.blue,// colorBlendMode: BlendMode.multiply,//给图片加滤镜// 接下来的是一个用的非常多的fit// fit: BoxFit.cover,//拉伸 充满战哥屏幕// fit: BoxFit.cover,//不拉伸 充满战哥屏幕 剪切 ---不会变形【最多！！！】// fit: BoxFit.fill,//拉伸 充满战哥屏幕 剪切 ----会变形// fill 和 cover 用的最多repeat: ImageRepeat.repeat, //平铺),width: 300.0,height: 300.0,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.blue, width: 2.0)),),);}
}

03 表单ListView（1）ListTile + image + Axis.horizontal

HomeContainer1----ListTile 垂直列表

HomeContainer2-----image 垂直图文列表

HomeContainer3------scrollDirection: Axis.horizontal 水平列表


///03 表单  ListView （1） -【ListTile + image + Axis.horizontal】垂直列表、垂直图文列表、水平列表
/// 1. ListView -ListTile 垂直列表
/// 2. ListView -image 垂直图文列表
/// 3. ListView - scrollDirection: Axis.horizontal 水平列表import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('表单ListTile'),),body: HomeContainer3()));}
}/// 3. ListView - scrollDirection: Axis.horizontal 水平列表
class HomeContainer3 extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(height: 180.0,child: ListView(scrollDirection: Axis.horizontal, // 水平// scrollDirection: Axis.vertical, // 垂直children: <Widget>[Container(width: 180.0,color: Colors.yellow[200],child: ListView(children: [Padding(padding: EdgeInsets.all(10)),Image.network("http://shp.qpic.cn/ishow/2735030216/1614674580_84828260_31404_sProdImgNo_2.jpg/0",),Text('露娜-瓷语鉴心',textAlign: TextAlign.center,)],),),Container(width: 180.0,color: Colors.red[100],),Container(width: 180.0,color: Colors.blue[200],),Container(width: 180.0,color: Colors.green[100],),],),);}
}// ListView -image垂直图文列表
class HomeContainer2 extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(padding: EdgeInsets.all(10), children: <Widget>[Image.network("http://shp.qpic.cn/ishow/2735030216/1614674580_84828260_31404_sProdImgNo_2.jpg/0"),Container(child: Text('露娜-瓷语鉴心',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,),),height: 60,padding: EdgeInsets.fromLTRB(0, 5, 0, 15),),Image.network("http://shp.qpic.cn/ishow/2735022210/1613959427_84828260_6733_sProdImgNo_2.jpg/0"),Image.network("http://shp.qpic.cn/ishow/2735022210/1613959513_84828260_31791_sProdImgNo_2.jpg/0"),]);}
}// ListView -ListTile 垂直列表
class HomeContainer1 extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(padding: EdgeInsets.all(10),children: <Widget>[ListTile(leading: Icon(Icons.sports_football,color: Colors.red,), // 在列表前面加图标 ，可以变换颜色title: Text('软件工程（国家级“本科教学工程”综合改革试点专业、广东省首批示范性软件学院）',style: TextStyle(color: Colors.orange, fontSize: 20.0),),),ListTile(leading: Icon(Icons.settings), // 在列表前面加图标 ，可以变换颜色title: Text('专业前景',style: TextStyle(color: Colors.orange),),subtitle: Text('软件工程专业培养的软件开发相居IT行业前列。',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),ListTile(trailing: Icon(Icons.home), //在表单末尾加上图标title: Text('培养目标',style: TextStyle(color: Colors.orange),),subtitle: Text('本专业培养德、智、体、美全面发展，掌握数学与自然科学基础知识，系统掌握计算机科学基础理论、计算机软/硬件系统及软件工程专业知识，具',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),ListTile(//leading:可以识别图标也可以识别图片leading: Image.network("http://shp.qpic.cn/ishow/2735020816/1612773126_84828260_2178_sProdImgNo_2.jpg/0"),title: Text('专业方向',style: TextStyle(color: Colors.orange),),subtitle: Text('软件开发、软件分析、嵌入式软件。',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),ListTile(//也可以实现两个图片 前后一起放leading: Image.network("http://shp.qpic.cn/ishow/2735011313/1610516936_84828260_3358_sProdImgNo_2.jpg/0"),trailing: Image.network("http://shp.qpic.cn/ishow/2735030216/1614674580_84828260_31404_sProdImgNo_2.jpg/0"),title: Text('主要课程：',style: TextStyle(color: Colors.orange),),subtitle: Text('计算机导论、程序设计基础、面向对象程序设计、计算机系统(1)、计算机系统(2)、数据结构与算法、离散数学、算法设计与分析、数据库系统、',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),],);}
}

04 表单ListView （2）动态列表、动态获取循环列表

动态列表

///04 表单ListView（2）动态列表 与循环获取动态列表import 'package:flutter/material.dart';import 'package:myapp01/res/listData.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('表单ListTile'),),body: HomeContainer3()));}
}// 3.使用itembuilder 来返回对应list
class HomeContainer3 extends StatelessWidget {Widget _getListData(context, index) {return ListTile(// 注意这里的格式 listData[index]得到当前index的数据// 在home1的类里面的get3方法中是value["imageUrl"] ----他是通过调用map来得到key和value// 这里则是通过index的方式 // map得到的是string item得到的是int数字title: Text(listData[index]["title"]),leading: Image.network(listData[index]["imageUrl"]),subtitle: Text(listData[index]["author"]),);}@overrideWidget build(BuildContext context) {return ListView.builder(// item相当于迭代器itemCount: listData.length, //返回一个list的长度itemBuilder: this._getListData);}
}// 2.使用itembuilder 来返回对应list
class HomeContainer2 extends StatelessWidget {List list = new List();// 构造函数HomeContainer2() {for (var i = 0; i < 20; i++) {this.list.add('it is $i');//这里是让list数组增加一些 string的数据}}@overrideWidget build(BuildContext context) {return ListView.builder(// item相当于迭代器itemCount: this.list.length, //返回一个list的长度itemBuilder: (context, index) {//itemBuilder是一个方法 传入两个参数 一个内容 一个索引值// return this.list[index]; // 这样返回比较奇怪return ListTile(title: Text(this.list[index]), //这里get到list的下表对应的内容//循环遍历 text里面就会得到string的内容 相当与在这里构造了一个新的ListTile // 省略了for来构建ListTile 采用了迭代的方式);},);}
}// 1.获取动态列表
class HomeContainer1 extends StatelessWidget {// 1.死方法 c+v
//自定义方法 _getData 加上_后表示私有方法// ignore: unused_elementList<Widget> _getData01() {return [ListTile(title: Text("list"),),ListTile(title: Text("list"),),ListTile(title: Text("list"),),];}// 2.使用for循环生成 listList<Widget> _getData02() {List<Widget> list = new List();for (int i = 0; i < 20; i++) {list.add(ListTile(title: Text("it is $i list"),));}return list;}// 3.import res中的list.dart文件中的数据List<Widget> _getData03() {// List<Widget> tempList = listData.map((value) { // 这样写 会报错 因为map返回的是('123','3232'), 不会返回一个list《widget》// 用var的话会返回一个string（？）的类型 反正不是list 所以在return的时候要.tolist一下var tempList = listData.map((value) {return ListTile(leading: Image.network(value["imageUrl"]),title: Text(value["title"]),subtitle: Text(value["author"]),);});return tempList.toList();}@overrideWidget build(BuildContext context) {return ListView(children: this._getData03(),);}
}

05 GridView 网格组件

///05 GridView 网格import 'package:flutter/material.dart';import 'package:myapp01/res/listData.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('表单ListTile'),),body: HomeContainer4()));}
}// 4 这里使用 GridView.builder
// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount【常用！！！！！
class HomeContainer4 extends StatelessWidget {Widget _getData(context, index) {return Container(child: Column(children: <Widget>[Image.network(listData[index]['imageUrl']),SizedBox(height: 10,),Text(listData[index]['title'],textAlign: TextAlign.center,style: TextStyle(fontSize: 15),),],),decoration:BoxDecoration(border: Border.all(color: Colors.grey, width: 1)),);}@overrideWidget build(BuildContext context) {return GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,mainAxisSpacing: 10,crossAxisSpacing: 10// 这里没有padding),itemCount: listData.length,itemBuilder: this._getData,);}
}// 3 映入res的LidtData
class HomeContainer3 extends StatelessWidget {List<Widget> _getData() {var temp = listData.map((value) {return Container(child: Column(children: <Widget>[Image.network(value['imageUrl']),SizedBox(height: 10,),Text(value['title'],textAlign: TextAlign.center,style: TextStyle(fontSize: 15),),],),decoration:BoxDecoration(border: Border.all(color: Colors.grey, width: 1)),);});//注意map 要tolistreturn temp.toList();}@overrideWidget build(BuildContext context) {return GridView.count(crossAxisSpacing: 10.0, //左右艰巨mainAxisSpacing: 10.0, //上下艰巨padding: EdgeInsets.all(20),// childAspectRatio: 0.7, //宽度与高度的比例 在crossAxisCount: 2, // :多少列children: this._getData());// mainAxisSpacing ： 主轴艰巨// crossAxisSpacing ： 很轴艰巨}
}// 2 调用方法 实现网格列表 【正式网格
class HomeContainer2 extends StatelessWidget {List<Widget> _getData() {List<Widget> list = new List();for (int i = 0; i < 20; i++) {list.add(Container(alignment: Alignment.center,child: Text('it is $i list',style: TextStyle(color: Colors.white, fontSize: 20),),color: Colors.blue,));}return list;}@overrideWidget build(BuildContext context) {return GridView.count(crossAxisSpacing: 20.0, //左右艰巨mainAxisSpacing: 20.0, //上下艰巨padding: EdgeInsets.all(20),childAspectRatio: 0.7, //宽度与高度的比例 在crossAxisCount: 2, // :多少列children: this._getData());// mainAxisSpacing ： 主轴艰巨// crossAxisSpacing ： 很轴艰巨}
}// 1 死方法
class HomeContainer1 extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView.count(crossAxisSpacing: 20.0, //左右艰巨mainAxisSpacing: 20.0, //上下艰巨padding: EdgeInsets.all(20),childAspectRatio: 0.7, //宽度与高度的比例 在crossAxisCount: 2, // :多少列children: <Widget>[Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),]);// mainAxisSpacing ： 主轴艰巨// crossAxisSpacing ： 很轴艰巨}
}

【Flutter】----学习笔记1（1～5）相关推荐

Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页前言思路分析案例代码结束语上图前言刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...
Flutter学习笔记（一）
Flutter学习笔记(一) 学习前言 dart安装 vscode配置持续更新中学习前言最近准备学习Flutter,参考B站 Dart Flutter教程_2022精讲Dart Flutter3 ...
Flutter学习笔记（18）--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
Flutter学习笔记--Gridview网格组件制作相册
Flutter学习笔记–Gridview网格组件制作相册效果: GridView可以构建一个二维网格列表,其官方定义参考: https://book.flutterchina.club/chapte ...
Flutter学习笔记（二）登陆注册界面的实现
Flutter学习笔记(二)登陆注册界面的实现简单的登录和注册界面的布局 SharedPreferences存储数据页面路由和参数传递的心得这几天按照顺序先完成了登录和注册的页面,没有什么特别的 ...
Flutter学习笔记之-圆形头像实现方式
Flutter学习笔记之-圆形头像实现方式开发中如何实现类似圆形图片 Container+BoxDecoration来实现圆角图像 class DemoWidget extends Stateles ...
Flutter学习笔记 —— CustomPainter自定义画布绘制爱心
Flutter学习笔记 -- CustomPainter自定义画布绘制爱心前言效果图代码示例温馨提示结束语前言最近在学习Flutter中 Canvas相关内容,今天尝试写了一个爱心Dem ...
Flutter学习笔记08-Padding Row Column Flex Expanded组件详解
学习视频地址:https://www.bilibili.com/video/BV1S4411E7LY?p=27&spm_id_from=pageDriver&vd_source=cee ...
Flutter学习笔记学习资料推荐，大学生android开发项目实例
Flutter开发中的一些Tips Flutter开发中的一些Tips(二) Flutter开发中的一些Tips(三) 正确操作Dart中的字符串[译] Flutter三种方式实现页面切换后保持原页面 ...

【Flutter】----学习笔记1（1～5）

01 container、Text组件

02 图片组件image

1.用的最多合集

2.圆形图片

3.本地图片

03 表单ListView（1）ListTile + image + Axis.horizontal

HomeContainer1----ListTile 垂直列表

HomeContainer2-----image 垂直图文列表

HomeContainer3------scrollDirection: Axis.horizontal 水平列表

04 表单ListView （2）动态列表、动态获取循环列表

动态列表

05 GridView 网格组件

【Flutter】----学习笔记1（1～5）相关推荐

最新文章

热门文章