Flutter積累一些常用基礎知識

fanyee^_^發表於2021-08-26
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();
}
複製程式碼

相關文章