Flutter积累一些常用基础知识

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

创建一个随机颜色

final color = Colors.primaries[Random().nextInt(Colors.primaries.length)];

Scaffold添加一个背景色

    return Scaffold(
       //backgroundColor: Colors.green,
      backgroundColor: Color.fromRGBO(0, 245, 245, 1.0),
    );

改变背景透明度，不改变文字透明度

  color: Colors.black.withOpacity(0.5),

获取屏幕的展示方向

MediaQuery.of(context).orientation == Orientation.portrait
              ? Axis.vertical
              : Axis.horizontal

启动页的知识点

flutter读琴项目笔记

本地图片占满整个屏幕 获取手机屏幕尺寸：

Size size = MediaQuery.of(context).size; Size size = MediaQuery.of(context).size;

   Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: [
          Image.asset(
            'assets/images/launch_img.jpg',
            fit: BoxFit.cover,
            width: size.width,
            height: size.height,
          )
        ],
      ),
    );

用层叠组件和位置组件写的一个带有倒计时的启动页

    return Scaffold(
      body: Stack(
        children: [
          Image.asset(
            'assets/images/launch_img.jpg',
            fit: BoxFit.cover,
            width: size.width,
            height: size.height,
          ),
          Positioned(
            child: _clipButton(),
            left: 10,
            top: MediaQuery.of(context).padding.top + 10,
          )
        ],
      ),
    );

使用ClipRRect 和Container 实现了一个可自定义圆角的按钮

 Widget _clipButton() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(50),
      child: Container(
        width: 50,
        height: 50,
        color: Colors.black,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('跳过', style: TextStyle(fontSize: 12, color: Colors.white)),
            Text('5s', style: TextStyle(fontSize: 12, color: Colors.white))
          ],
        ),
      ),
    );
  }

一个定时器的写法 _timer!.cancel(); //销毁路由

  int _currentTime = 6;
  Timer? _timer;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _timer = Timer.periodic(Duration(milliseconds: 1000), (Timer) {
      setState(() {
        _currentTime--;
      });
      if (_currentTime <= 0) {
        _jumpRootPage();
      }
    });
  }

  

启动页是使用路由跳转到首页以及销毁路由的方法、

void _jumpRootPage() {
    _timer!.cancel();
    Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
          builder: (BuildContext context) => RootPage(),
        ),
        (route) => false);
  }

dart操作符

类型判定操作符 操作符 解释 as 类型转换 is 如果对象是指定的类型返回 True is! 如果对象是指定的类型返回 False 1 2 3 4 5 6 int a = 123; String b = 'ducafecat'; String c = 'abc'; print(a as Object); print(b is String); print(c is! String);

条件表达式

操作符	解释
condition ? expr1 : expr2	如果 condition 是 true，执行 expr1 (并返回执行的结果)； 否则执行 expr2 并返回其结果。
expr1 ?? expr2	如果 expr1 是 non-null，返回其值； 否则执行 expr2 并返回其结果。

bool isFinish = true;
String txtVal = isFinish ? 'yes' : 'no';

bool isFinish;
isFinish = isFinish ?? false;
or
isFinish ??= false;

级联操作符 操作符 解释 .. 可以在同一个对象上 连续调用多个函数以及访问成员变量。

StringBuffer sb = new StringBuffer();
sb
..write('hello')
..write('word')
..write('\n')
..writeln('doucafecat');

Dart中..级联操作

class Person {
  var name;
  var age;
  Person(this.name, this.age);
  getInfo() {
    print("${this.name},${this.age}");
  }
}

main() {
  var p = new Person('张三', 20);
  p.getInfo();
  //..为级联操作,可以同时赋值执行方法
  p
    ..name = "李四"
    ..age = 30
    ..getInfo();
}