flutter 记录

作者: 你飞跃俊杰 | 来源:发表于2021-02-25 11:22 被阅读0次

Flutter学习记录-汇总
Flutter 插件开发实践(一)
Flutter工程解析篇 + 工程代码部分解析记录
Flutter入门
Flutter EventBus
（一）flutter入门之环境安装
vscode创建flutter项目
Flutter学习二之Dart语言介绍
Flutter 开发记录
在MacOS上搭建Flutter开发环境

第2节

//安装flutter
git clone https://github.com/flutter/flutter.git
ls ~/.bash_profile
touch ~/.bash_profile
source ~/.bash_profile
vim ~/.bash_profile
/*
//延用系统配置
if [ -f /etc/bash_profile ]; then
./etc/bash_profile
fi
//镜像地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
//路径
export PATH="$PATH:~/Downloads/flutter/bin"
*/
flutter -v

//修改权限
chmod 777
//查看权限
ls -l

。文件是隐藏文件
以前默认bash(。bash_profile），现在zsh（。zshrc）
//切换命令行
//shell
chsh -s
chsh -l

shell
vi 修改文件

iOS有每个环境对应的路径 config里的路径是绝对路径，很多地方要用到所以是绝对路径

echo $PATH

which flutter

flutter doctor

flutter precache

flutter -v

flutter run
flutter run -d 'iPhone X'

flutter create fluter_Demo

跑不起来卡死，清缓存
rm flutter/bin.cache/lockfile

as快捷
common+ {} 光标的上下一个位置
common+。折叠代码
common+shift+'-' 折叠代码

as编译的时候会自动修改xcconfig配置文件路径

第3节布局与状态管理

默认写法
class base_widgetTextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(//
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: ContainerDemo(),
),
theme: ThemeData(//主题
primaryColor: Colors.blue,
primarySwatch: Colors.yellow,//统一标题颜色
),
);
}
}

text文字
overflow超出显示

RichText富文本，TextSpan富文本文字

Container 容器
SizedBox(height: 10),//换行占位

alignment -1,-1左上角
横row,纵column,stack中间堆叠

//主轴与交叉轴跟 row和column有关他两相反
/*

关于主轴:mainAxisAlignment
spaceBetween 剩下的空间平均分布到小部件之间 1👌2👌2👌1
spaceAround 剩下的空间平均分布到小部件的周围 👌1👌1👌
spaceEvenly 剩下的空间和小部件一起平均分布 1👌1👌1👌1
*/

交叉轴：crossAxisAlignment
/*

交叉轴：crossAxisAlignment；主轴不影响交叉轴布局
start上对齐，end下对齐
*baseline必须要textBaseline
// alphabetic 英文字符 //ideographic 中文字符第一行中文底部对齐
*/

Expanded 填充式布局，主轴不留间隙的填充，主轴设置和长度没有意义

Positioned 相对Stack容器最值（左右最宽，上下最长），相对布局，上下左右对齐 = Container

AspectRatio 宽高比例布局 aspectRatio

第4节项目实战-项目搭建&发现界面

floatingActionButton悬浮按钮
BottomNavigationBar tabar （ixedColor: Colors.green,//选择颜色selectedFontSize: 12.0, selectedFontSize: 12.0,//选择字体大小
ThemeData（highlightColor: Color.fromRGBO(1, 0, 0, 0.0),//透明splashColor: Color.fromRGBO(1, 0, 0, 0.0),//水波纹

替换启动和icon iOS 一样的安卓 android/app/src/main/res/ 不能用大写字母用下划线，图片拖进去会没了，x是2倍，h1.5，m1 AndroidManifest.xml 修改图片名
安卓被锁住要修改镜像 gradle assembleDebug 报错
启动图片launch_background
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/app_icon" />
</item>
安卓不用加图片后缀名，加了有问题

image图片配置
assets：

文件夹/
’文件夹/图片名‘

//以下三个为了安卓
centerTitle: true,//去掉安卓切换app会有文字
title: Text(
'发现',
),
elevation: 0.0,//去掉安卓底部边栏

MediaQuery.removePadding(//去掉刘海空隙

margin 外边距，定位子部件，padding 内边距，父部件

二分，或多分布局思维左右/上下两块

decoration: BoxDecoration(//装饰器，设置圆角
color: Colors.blue,
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage('images/Hank.png'), fit: BoxFit.cover),//填充
),

width: MediaQuery.of(context).size.width,//获取屏幕宽度

ListView.builder(重用机制

Container(
height: 0.5,
color: WeChatThemeColor,
child: Row(//去掉边
children: <Widget>[
Container(
width: 50,
color: Colors.white,
)
],
),

Container(
color: WeChatThemeColor,包装一下，设一下listview背景色
child: ListView.builder(
controller: _scrollController,
itemCount: _listDatas.length + _headerData.length,
itemBuilder: _itemForRow,
)), //列表
},
), //

//链式编程
_listDatas..addAll(datas)..addAll(datas);

// _listDatas.addAll(datas);
// _listDatas.addAll(datas);

//排序! 首字母排序
_listDatas.sort((Friends a, Friends b) {
  return a.indexLetter.compareTo(b.indexLetter);
});

index思路：第一个必定需要字母头，从第二个开始判断indexLetter跟前一个一样就不显示

iOS打包，app app.framework（flutter代码，字节码，二进制流）/flutter.framework（flutter引擎）

y ~/ itemHeight //取整

_scrollController 添加滚动动画

indexbar控件
1.创建column控件，加scroview让它可以滚动
2.点击拖拽手势（加滚动动画，用控件的坐标算出是第几个）
3.增加控件
4；存储高度，滚动的时候直接取

更新代码库 flutter pub get
flutter packages get => flutter pub get
代码网站 https://pub.dev

import 'package:http/http.dart' as http; //重命名为http

配置允许http

//Map转Json

// final chatJson = json.encode(chat);
// print(chatJson);
//Json转Map
// final newChat = json.decode(chatJson);
// print(newChat is Map);

*/

const Chat({this.name, this.message, this.imageUrl});//必须创建新对象
factory Chat.fromJson(Map json) {//工厂构造函数：返回任何对象，已有的对象（单例），null，新建的
return Chat(
name: json['name'],
message: json['message'],
imageUrl: json['imageUrl'],
);
}

渲染机制，不在界面上就没有了。可以刻意去保存

flutter闭包，就是一个对象

超时了数据还会来

dart 单线程语音

//耗时操作
//1.后面的操作必须是异步才能用await修饰
//2.当前行数也必须是异步函数 async

getData() async { Future((){//闲时操作).then(value) {}.catchError(errorFunc){}.whenComplete(() { print('完成了!');}); }//先error再then error也会掉then,完成一定会执行

Future有一个执行队列。同级then比Future队列任务级别高

then函数抛异常会直接到下一个catchError函数

//队列
void testFuture() async {
//同级 then比Future队列任务级别高
Future(() {
sleep(Duration(seconds: 2));
return '任务1';
}).then((value) {
print(' $value结束'); throw Exception('Error'); return '$ value任务2';
}).then((value) {
print(' $value结束'); return '$ value任务3';
}).catchError((e)=>print('结束')).then((value) {
print(' $value 4结束'); throw Exception('Error2'); return '$ value任务4';
}).catchError((e)=>print('结束2'));//then函数抛异常会直接到下一个catchError函数
print('任务添加完毕');
}