Flutter基础（纯新手笔记）
1、有状态和无状态的控件
// StatefulWidget 有状态(更新)的控件 class MyText extends StatefulWidget {} // 由两个类组成如：Test类和_Test类 // StatelessWidget 无状态(更新)的控件 class MyText extends StatelessWidget {}
// 有状态控件写法如下
class Test extends StatefulWidget {
const Test({super.key, required this.params});
final Map? params;
@override // 复写，拿父类有的方法来重写类似render
State<Test> createState() => _Test(); // 创建一个_Test类
}
class _Test extends State<Test> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return 控件;
}
}
2、颜色码的使用注意事项：
// 不能使用三位缩写颜色码，如#333必须改为#333333；
3、交互控件
GestureDetector // 常用回调 // onTap 点击 // onTapDown 按下 // onTapUp 抬起 // onTapCancel 点击取消事件，比如点击某个按钮后未抬起手指状态下移出按钮 // onDoubleTap 双击 // onDoubleTapDown 双击按下 // onDoubleTapUp 双击抬起 // onDoubleTapCancel
4、超出屏幕解决方法
SingleChildScrollView // 注意事项：只适合稍微超出的内容，长列表不适合，长列表使用listview控件 // 其他注意事项：
5、Row控件
行内子控件宽度自适应：mainAxisSize: MainAxisSize.min
排列方式：mainAxisAlignment: MainAxisAlignment.spaceBetween；crossAxisAlignment: CrossAxisAlignment.start
6、外边框、圆角写法
decoration: BoxDecoration( borderRadius: const BorderRadius.all(Radius.circular(12)), color: HexColor('#FFFFFF') ) // 12圆角白色底的矩形框
shape: BoxShape.circle, // 圆
7、日历控件的使用
SfDateRangePicker // 注意事项：日历本身属性更改才会刷新 // 解决方法：headerHeight: headerHeight，设置该属性，赋值为headerHeight+/-0.01,
// onViewChange方法内的数据更改需要在Future内，不然页面会报错，如下
void _onViewChange(dateRangePickerViewChangedArgs) {
Future.microtask(() {
setState(() {
xx = xxx;
});
});
}
8、数组map遍历方法
// 遍历值 appetiteList.map((item) => { return item; }).toList(); // 遍历索引 appetiteList.asMap().keys.map((index) => { return appetiteList[index]['name']; }).toList();
9、window问题，不能通过window获取屏幕相关属性，获取页面宽度用以下代替
MediaQuery.of(context).size.width
10、字符串的一些方法
判断是否包含某字符串：str.contains('xx');
截取字符串（从右往左截取两个字符）：str.substring(0, str.length - 2);
11、滑块的使用及注意事项
Container( margin:xxx, width: xxx, height: 20, // 这里是可点击拖拽滑动的区域，不能跟轨道高度一样小，不然会导致滑动非常不灵敏 child: SliderTheme( data: SliderThemeData( trackHeight: 6, // 轨道高度 xxxxxx ), child: Slider( value: xxx, onChanged: (value) { setState(() { xxx = xxxx; }); }, onChangeEnd: (value) { setState(() { xxx = xxxx; }); }, // 轨道值范围 min: 0, // 开始值 max: 5, // 结束值 // divisions: 5, // 轨道要分几段 activeColor: HexColor('xxx'), // 滑动过的颜色 inactiveColor: HexColor('xxx'), // 未滑动过的颜色 ), ), )
12、拉起相机拍照或者获取相册获取照片
需要用到插件：image_picker
import 'dart:io'; // 文件操作用到
import 'package:image_picker/image_picker.dart';
// 调取相机或者相册
void _takePhoto() async { var img = await ImagePicker().pickImage(source: ImageSource.camera); setState(() { imgPath = File(img!.path); }); }
// 将图片展示 Image.network( // android端不支持 imgPath.path, ),
Image.file( // web端不支持 imgPath, ),