admin管理员组

文章数量:1123158

【Flutter】

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

1. image的小标签
2. net的图片
3. 圆形图片
4. 本地图片

1.用的最多合集

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

2.圆形图片

头像

3.本地图片

的步骤：

1. 新建images文件夹 注意要有1x2x3x等等等等
2. 在.yaml文件 里面配置
3. 在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('.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(".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(".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(".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(".jpg/0"),Container(child: Text('露娜-瓷语鉴心',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,),),height: 60,padding: EdgeInsets.fromLTRB(0, 5, 0, 15),),Image.network(".jpg/0"),Image.network(".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(".jpg/0"),title: Text('专业方向',style: TextStyle(color: Colors.orange),),subtitle: Text('软件开发、软件分析、嵌入式软件。',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),ListTile(//也可以实现两个图片 前后一起放leading: Image.network(".jpg/0"),trailing: Image.network(".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