Flutter初探

Posted 2022-04-17 stevenhusir

Flutter简介

跨平台：RN 底层沿用的是原生iOS和安卓区别
Flutter：谷歌开发的，有自己的渲染引擎，保持Android和iOS保持一致性

Flutter小技巧

1.创建flutter工程

#创建flutter工程
#工程名不能用大写
flutter create flutter_demo

• Flutter Package 只能用于 Dart 语言
• Flutter Plugin 针对原生和Dart
• Flutter Module 适用混合开发
• pubspec.yaml 配置资源
• 代码写在lib文件夹下
• 主文件：main.dart

2.运行Flutter

模拟器运行

#运行 flutter run -d '模拟器名称'
flutter run -d 'iPhone X'

真机运行

#真机运行：配置证书

调试和热更新

• Shift + R 重新运行
• Shift + r 热更新
• Release 版本后不支持热更新，有点儿像playground
• flutter项目在android环境下不能放在中文目录下，否则会编译报错或者用终端运行

热更新按钮，不用每次都运行工程

快捷键 Command + /

3.清除缓存

#清除flutter缓存 rm flutter缓存目录
rm /opt/flutter/bin/cache/lockfile

4.格式化代码

Command + option + L 格式化代码

5.代码块伸缩快捷键

Command + 减号 代码块伸缩

6.补充

• final 不可变 var 可变
• stl 无状态代码块快捷键
• MaterialApp封装好一些列UI控件，类似ios原生控件

7.源码

语言

dart语言

UI框架导入

import 'package:flutter/material.dart'; //类似UIKit

Flutter widget分类 Widget(小部件 类似UIView)

• 有状态的 Stateful(多一个状态类) StatefulWidget
• 无状态 Stateless(不可变) StatelessWidget

入口类函数

Simple

//入口函数(widget),采用声明式Ui
void main() 
  runApp(MyWidget());

其他写法

// main函数只有一行代码时，可以用 => 代替括号
void main() => runApp(App());```

定义Class及样式

传统定义Class

//一个widget就是一个类
class MyWidget extends StatelessWidget 
  //build 渲染方法或者构造函数
  @override
  Widget build(BuildContext context) 
    final _textStyle = TextStyle(
        color: Colors.red, fontSize: 40.0, fontWeight: FontWeight.bold);
    return Center(
      child: Text(
        'Hello,Widget,牛逼??',
        textDirection: TextDirection.ltr,
        style: _textStyle,
      ),
    );
  

  Widget func() 
    return Text(
      '哈哈',
      textDirection: TextDirection.ltr,
    );
  

MaterialApp使用

//dart语言
import 'package:flutter/material.dart'; //类似UIKit

//void main() 
//  runApp(MyWidget());
//
// main函数只有一行代码时，可以用 => 代替括号
void main() => runApp(App());

class App extends StatelessWidget 
  //MaterialApp封装好一些列UI控件，类似iOS原生控件
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('我是MaterialApp'),
        ), //导航条
        body: MyWidget(),
      ), //根控制器,debug标志
      theme: ThemeData(primaryColor: Colors.yellow),
    );
  


//一个widget就是一个类
class MyWidget extends StatelessWidget 
  //build 渲染方法或者构造函数
  @override
  Widget build(BuildContext context) 
    final _textStyle = TextStyle(
        color: Colors.red, fontSize: 40.0, fontWeight: FontWeight.bold);
    return Center(
      child: Text(
        'Hello,Widget,牛逼??',
        textDirection: TextDirection.ltr,
         style: _textStyle,
      ),
    );
  

  Widget func() 
    return Text(
      '哈哈',
      textDirection: TextDirection.ltr,
    );
  

//material.app

效果图