JZTXT

Flutter基础（纯新手笔记）

发布时间 2023-08-31 15:51:51作者: 桃李子

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).path;
    });
}
// 将图片展示
Image.network( // 不推荐使用Image.file展示图片，web端不支持
    imgPath,
),