51 lines
2.2 KiB
Markdown
51 lines
2.2 KiB
Markdown
# flutter_qucikstart
|
||
|
||
A new Flutter project.
|
||
|
||
## Getting Started
|
||
|
||
This project is a starting point for a Flutter application.
|
||
|
||
A few resources to get you started if this is your first Flutter project:
|
||
|
||
- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
|
||
- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
|
||
|
||
For help getting started with Flutter, view our
|
||
[online documentation](https://flutter.dev/docs), which offers tutorials,
|
||
samples, guidance on mobile development, and a full API reference.
|
||
|
||
# 开发细节注意
|
||
## 布局
|
||
- scaffold home 主视图拆成函数
|
||
- 颜色放在common里统一管理，使用class静态属性调用
|
||
- 不同结构使用注释标识，使用end结尾结构更清楚
|
||
## 导入资源和图片
|
||
- 固定写法 assets/images/3.0x flutter自动适配几倍图
|
||
- 在pubspec中导入资源，在commont新建assets类管理资源
|
||
- 使用stack进行叠加，使用aligment进行对齐管理
|
||
## 字体和文本设置
|
||
- 导入字体，设置family和路径，以及不同字体对应的字重
|
||
- text，使用style配置样式，fontsize是字体大小，height是行高，是个比值，使用具体的行高值/字体大小
|
||
## 增加倒计时
|
||
- 将无状态组件转成有状态组件，信息变化
|
||
- 使用future.delayed实现倒计时，注意使用async
|
||
- 使用三目运算符控制显示
|
||
- 将相同组件抽出
|
||
## 图片自适应
|
||
- 在main中使用theme设置全局样式
|
||
- 在padding中使用edgeinsets.symmetric设置水平间距
|
||
- image中，使用fit Boxfit来设置宽高适配
|
||
## 导航，布局
|
||
- 从上到下，从左到右分析布局
|
||
- 写布局前，先把结构列好，用函数拆分，用_bulid开头，表示私有布局函数
|
||
- 在使用elevatedbutton时，使用style将样式还原，在外面套一层Container作为装饰，更方便配置
|
||
- 使用Navigator.pushReplacement 替换路由
|
||
## 表单
|
||
- 表单TextField通过textfield.decoration进行装饰
|
||
- 使用prefixIcon、suffixIcon设置前置、后置图标
|
||
- 一些简单的验证可以放在TextField的onChanged中
|
||
- 注意在涉及到更新状态时，使用setState
|
||
## 按钮组件
|
||
- 抽取公共组件，放在commont里
|
||
- 公共组件外露的属性，使用final修饰，并在构造函数中 |