文章目录
通过vscode安装flutter和dart、Awesome Flutter Snippets
插件来实现flutter项目 的编写
flutter
运行flutter项目
在终端输入:
运行成功后,会出现界面
1)flutter devices 查看设备
(真机调试一开始在手机上看不行,后来我发现手机调成开发者模式后还需要在系统里把
仅充电模式下允许ADB调试,usb调试打开,并在之后弹出的确认框点击确认后才可以被电脑找到)
usb连接电脑时选择仅充电
2)flutter run -d all运行在所有的设备,也可以shift+L
3)flutter run -d chrome指定设备运行
1)热加载:r
首先修改好页面后,保存下来,鼠标点一下终端,输入r,此刻热加载后修改内容会出现。
2)热重启:R
3)pr:会出现网格,这个可以很好的掌握布局,工作中很有用
4)o键:切换android和ios的预览模式
5)q键:退出调试预览模式
1、创建flutter项目
使用andriod studio创建
com.example
2、flutter目录
pubspec.yaml项目的依赖,版本号,配置信息
analysis_options.yaml检查语法的文件
3、使用MaterialApp和Scafffold两个组件装饰App
1)MaterialApp
常用的属性:
home主页
title 标题
color颜色
theme主题
routes路由
2)Scafffold
4、自定义组件
flutter中自定义组件其实就是一个类,这个类继承StatelessWidge/StatefulWidget
StatelessWidget是无状态组件,状态不可变的widget
StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变
//可以通过键入statelessW快捷生成模板,包含构造函数和bulid
5、Container、Text容器组件
1)Container
alignment\decoration\margin\padding\transform/height/width/child
代码:
import 'package:flutter/material.dart'; //必写
void main() {
//入口函数
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("welcome to you~salt soda")),
body: const MyApp1(),
),
));
}
//自定义组件
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return const Center(
//通过textDirecction修饰前面的文本
child: Text(
//按住ctrl键可以查看text的内部信息
"hello ,yhx's girlfriend~",
textDirection: TextDirection.ltr,
style: TextStyle(
//color: Colors.red //通过Colors指定颜色,也可以通过Color.fromRGBO(244,244,123,1)
color: Color.fromRGBO(122, 146, 136, 1),
fontSize: 40)),
);
}
}
class MyApp1 extends StatelessWidget {
const MyApp1({super.key});
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.center,
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.red, //背景颜色
border: Border.all(
//边框
color: Colors.blue,
width: 2),
borderRadius: BorderRadius.circular(100), //配置圆角
boxShadow: const [
BoxShadow(color: Colors.yellow, blurRadius: 10.0) //配置阴影效果
],
//背景颜色渐变
//线性渐变,径向渐变
/* gradient:
const LinearGradient(colors: [Colors.red, Colors.lightBlue])*/
gradient:
const RadialGradient(colors: [Colors.red, Colors.lightBlue])),
child: const Text(
"你好Flutter",
style: TextStyle(color: Colors.white),
),
),
);
}
}
一些在这里插入图片描述
1)径向渐变
gradient: const RadialGradient(colors: [Colors.red, Colors.lightBlue])
2)线性渐变
gradient:const LinearGradient(colors: [Colors.red, Colors.lightBlue]))
3)创建按钮
2)Text
TextStyle:
6、图片组件、本地图片、远程图片、图片裁切
6.1组件
Image.asset本地图片
Image.network远程图片
1)Image组件的常用属性:
①alignment 类型Alignment 图片对齐方式
②color和colorBlendMode 设置图片的背景颜色
③fit
BoxFit.fill全图显示,图片会被拉伸并充满容器
BoxFit.contain全图显示,原比例,可能会有空隙
BoxFit.cover显示可能拉伸,裁切,充满整个容器不变形
BoxFit.fitWidth宽度充满
BoxFit.fitHeight竖向充满
BoxFit.scaleDown跟contain差不多,但是此属性不允许显示超过原图片大小,可小不可大
④repeat 平铺
ImageRepeat.repeat横向纵向都进行重复,知道铺满整个画布
ImageRepeat.repeatX
ImageRepeat.repeatY
6.2实现圆角图片
①
class Circular extends StatelessWidget {
const Circular({super.key});
Widget build(BuildContext context) {
return Container(
height: 150,
width: 150,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(75),
image: const DecorationImage(
image: NetworkImage(
"https://i0.hdslb.com/bfs/emote/0afecaf3a3499479af946f29749e1a6c285b6f65.png@48w_48h.webp"),
fit: BoxFit.cover)),
);
}
}
②ClipOval实现圆角图片
//圆形图片2
class Circular2 extends StatelessWidget {
const Circular2({super.key});
Widget build(BuildContext context) {
return Center(
child: ClipOval(
child: Image.network(
"https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
width: 150,
height: 150,
fit: BoxFit.cover,
),
));
}
}
6.3本地组件
images文件夹。2.0x,3.0x,根目录下都应该有图片,并在yaml中配置
assets:
- images/a.jpg
- images/2.0x/a.jpg
- images/3.0x/a.jpg
- images/b.jpg
- images/2.0x/b.jpg
- images/3.0x/b.jpg
并在自定义组件中写
//加载本地图片
class Circular extends StatelessWidget {
const Circular({super.key});
Widget build(BuildContext context) {
return Container(
width: 150,
height: 150,
decoration: const BoxDecoration(color: Colors.black),
child: Image.asset("images/a.jpg", fit: BoxFit.cover));
}
}
7、flutter自带图标组件和自定义图标
1)自带图标
Icon(Icons.settings,size:40,color:Colors.red)
2)自定义图标
首先在iconfoot官网下载图标的代码,将其解压后把json和tf文件复制在根目录新建的fonts文件夹中,并在yaml配置
fonts:
- family: Schyler
fonts:
- asset: fonts/iconfont.ttf
- family: BoomIcon
fonts:
- asset: fonts/boom.ttf
并在lib根目录新建ItyIcon.dart文件,配置相关自定义图标
import 'package:flutter/material.dart'; //必写
class Ityicon {
// "font_class" "unicode"
static const IconData xiaoxiong =
IconData(0xe616, fontFamily: "Schyler", matchTextDirection: true);
static const IconData wanjuxiaoxiong =
IconData(0xe60b, fontFamily: "Schyler", matchTextDirection: true);
static const IconData baozha =
IconData(0xe610, fontFamily: "BoomIcon", matchTextDirection: true);
}
在main.dart导入该dart文件
import 'package:flutter/material.dart'; //必写
import './Ityicon.dart';
调用语句
//图标
class MyIcon extends StatelessWidget {
const MyIcon({super.key});
Widget build(BuildContext context) {
return const Row(children: [
SizedBox(height: 100),
Icon(Icons.home, size: 40, color: Colors.red),
SizedBox(
height: 20,
),
Icon(
Icons.settings,
size: 40,
color: Colors.green,
),
SizedBox(
height: 10,
),
Icon(
Ityicon.xiaoxiong,
size: 20,
color: Colors.pink,
),
Icon(
Ityicon.wanjuxiaoxiong,
size: 30,
color: Colors.brown,
),
Icon(Ityicon.baozha, size: 30, color: Color(0xFFd81e06))
]);
}
}
8、列表组件,listview布局,gridview布局
1)listview
①静态列表
ListView ListTile实现列表
②动态列表
2)gridview
GridView创建网格列表主要有三种方式
1、可以通过GridView.count实现网格布局
2、可以通过GridView.extent实现网格布局
3、通过GridView.builder实现动态网格布局
//GridView
class Gridviewq extends StatelessWidget {
const Gridviewq({super.key});
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount:5,
children:const [
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike),
Icon(Icons.pedal_bike)
]
);
}
}
3)页面布局Padding Row Column Flex Expanded组件
①Padding
Padding(
padding:EdgeInsets.all(20),
child:Text("你好flutter");
);
padding:padding值,EdgeInsets设置填充的值
child:子组件
②Row水平布局组件
mainAxisAlignment:主轴的排序方式
crossAxisAlignment:次轴的排序方式
children:组件子元素,
double.infinity和double。maxFinite可以让当前元素的width或者height达到父元素的尺寸
//Row
class RowTest extends StatelessWidget {
const RowTest({super.key});
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.black12,
child: Row(
//外部没有Container 行是自适应的
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RowTestson(
Icons.home,
color: Colors.yellow,
),
RowTestson(
Ityicon.baozha,
color: Colors.pink,
),
RowTestson(
Icons.abc,
color: Colors.blueAccent,
)
],
),
);
}
}
//Row子区域
class RowTestson extends StatelessWidget {
Color color;
IconData icon;
RowTestson(this.icon, {Key? key, this.color = Colors.red}) : super(key: key);
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 100,
width: 100,
color: color,
child: Column(
children: [
Icon(
icon,
size: 28,
color: Colors.lightGreen,
),
const Text(
"1111111",
style: TextStyle(fontSize: 20),
)
],
));
}
}
效果:
③Column垂直布局组件
mainAxisAlignment:主轴的排序方式
crossAxisAlignment:次轴的排序方式
children:组件子元素
//Column
class ColumnTest extends StatelessWidget {
const ColumnTest({super.key});
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.black12,
child: Column(
//外部没有Container 默认沾满整列
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ColumnTestson(
Icons.home,
color: Colors.yellow,
),
ColumnTestson(
Ityicon.baozha,
color: Colors.pink,
),
ColumnTestson(
Icons.abc,
color: Colors.blueAccent,
)
],
),
);
}
}
//Row子区域
class ColumnTestson extends StatelessWidget {
Color color;
IconData icon;
ColumnTestson(this.icon, {Key? key, this.color = Colors.red})
: super(key: key);
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 100,
width: 100,
color: color,
child: Column(
children: [
Icon(
icon,
size: 28,
color: Colors.lightGreen,
),
const Text(
"1111111",
style: TextStyle(fontSize: 20),
)
],
));
}
}
④flex
实现弹性布局
如:上方搜索框实现绿框宽度固定,红框随屏幕自适应
还有1:5的比例布局
还比如:
1:3后3在1:3划分区域
例子:实现横向布局1:2
//flex
class flexR extends StatelessWidget {
const flexR({super.key});
Widget build(BuildContext context) {
/*return Container(
child: Row(children: [
RowTestson(
Icons.ac_unit_sharp,
color: Colors.yellow,
),
RowTestson(
Icons.tab,
color: Colors.deepOrange,
)
]),
);*/
return Row(
children: [
Expanded(
flex: 1,
child: RowTestson(//这个元素设置宽度没有效果,flex的优先级最高
Icons.kayaking,
color: Colors.yellowAccent,
),
),
Expanded(
flex: 2,
child: RowTestson(
Icons.javascript,
color: Colors.lightBlue,
))
],
);
}
}
竖直上1:2
//flex
class flexR extends StatelessWidget {
const flexR({super.key});
Widget build(BuildContext context) {
/*return Container(
child: Row(children: [
RowTestson(
Icons.ac_unit_sharp,
color: Colors.yellow,
),
RowTestson(
Icons.tab,
color: Colors.deepOrange,
)
]),
);*/
return Flex(
direction: Axis.vertical,
children: [
Expanded(
flex: 1,
child: RowTestson(
Icons.kayaking,
color: Colors.yellowAccent,
),
),
Expanded(
flex: 2,
child: RowTestson(
Icons.javascript,
color: Colors.lightBlue,
))
],
);
}
}
水平上左边自适应,右边宽度固定,该布局适合搜索框
//flex左边自适应,右边固定
class flexA extends StatelessWidget {
const flexA({super.key});
Widget build(BuildContext context) {
/*return Container(
child: Row(children: [
RowTestson(
Icons.ac_unit_sharp,
color: Colors.yellow,
),
RowTestson(
Icons.tab,
color: Colors.deepOrange,
)
]),
);*/
return Row(
children: [
Expanded(
flex: 1,
child: RowTestson(
Icons.kayaking,
color: Color.fromARGB(255, 18, 179, 90),
),
),
//下面的区域宽度,就是有RowTestson中设置的width决定
RowTestson(
Icons.javascript,
color: Colors.lightBlue,
)
],
);
}
}
实现2:1后1在划分为1:1
//flex1:2后2在1:1
class flexDivideDivide extends StatelessWidget {
const flexDivideDivide({super.key});
Widget build(BuildContext context) {
return ListView(
children: [
Container(
width: double.infinity,
padding: const EdgeInsets.all(10),
height: 200,
color: Colors.amber,
),
Row(
children: [
Expanded(
flex: 2,
child: SizedBox(
height: 180,
width: double.infinity,
child: Image.network(
"https://tse4-mm.cn.bing.net/th/id/OIP-C.8RtEr_MWEPFlRdh_rhBqiAHaE8?pid=ImgDet&rs=1",
fit: BoxFit.cover,
),
)),
Expanded(
flex: 1,
child: SizedBox(
height: 180,
child: Column(
children: [
Expanded(
flex: 1,
child: SizedBox(
width: double.infinity,
child: Image.network(
"https://tse4-mm.cn.bing.net/th/id/OIP-C.8RtEr_MWEPFlRdh_rhBqiAHaE8?pid=ImgDet&rs=1",
fit: BoxFit.cover,
),
)),
const SizedBox(height: 5),
Expanded(
flex: 1,
child: SizedBox(
width: double.infinity,
child: Image.network(
"https://tse4-mm.cn.bing.net/th/id/OIP-C.8RtEr_MWEPFlRdh_rhBqiAHaE8?pid=ImgDet&rs=1",
fit: BoxFit.cover,
),
)),
],
)))
],
)
],
);
}
}
4)层叠布局(stack,Align,Positioned
①stack组件,Positioned
Stack表示堆,可以用Stack或者Stack结合Align或者Stack结合Positioned来实现页面的定位布局
属性:
alignment 配置所有子元素的显示位置
children 子组件
如果想实现页面上方有个固定的二级窗口,可以采用Stack,并通过Positioned控制二级窗口的位置,这是必须给Positioned设置宽度,这里不能使用width:double.infinity,这个只能用在Container里,可以通过FlutterMediaQuery获取屏幕宽度和高度。
final size = MediaQuery.of(content).size;
组件的build方法可以通过,=MediaQuery.of(context).size;
再通过width:size.width,
Stack组件外面必须要有个容器可以是SizedBox也可以是Container,然后给容器设置宽和高
②Flutter Stack Align
Align组件可以调整子组件的位置,Stack组件中结合Align组件也可以控制每个子元素的显示位置
alignment 配置所有子元素的显示位置
child 子组件
之后内容换一篇更新,就先到这里啦~