第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任务2';
}).then((value) {
print('value任务3';
}).catchError((e)=>print('结束')).then((value) {
print('value任务4';
}).catchError((e)=>print('结束2'));//then函数抛异常会直接到下一个catchError函数
print('任务添加完毕');
}
//微任务scheduleMicrotask高于Future
异步编程 https://www.cnblogs.com/lxlx1798/p/11126564.html
多线程 Isolate
用端口监听，收发消息
异步操作返回都是futuer
compute 多线程，Isolate的封装
