Flutter （一）环境搭建

• OS： Mac/Windows
• IDE: Android Studio / VS Code
• Language：Dart

一、Flutter中文网Setup

1. 核心配置Flutter镜像，全局

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Windows：我的电脑->设置->环境变量

MacOS：在 .bash_profile 导入环境变量

2. SDK配置

Flutter下载 Github下载

Windows：解压完成，打开Fluter.bat 文件自动配置，把 flutter/bin 目录放到环境变量中可以全局使用

MacOS： 把 flutter/bin 放到 .bash_profile 配置环境变量中，可以全局使用

Git 下载配置

3. flutter 常用命令

# 检测配置
flutter doctor -v(详情)
# 创建项目
flutter create -a [Android\java\kotlin(default)] -i [iOS\objc\swift(default)] [项目名称]
# 编译项目
flutter build
# 运行项目
fluter run -d [device名称]

# run 之后的命令
r Hot reload.
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

4. 直接AS运行

配置 Flutter 插件

5. VSCode需要配置

配置 flutter 插件

二、第一个Flutter项目

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Dome"),
        ),
        body: Center(
          child: Text("hello Flutter"),
        ),
      ),
    );
  }
}

MaterialApp 相当于iOS中的创建项目的是UIBarController

Scaffold 相当于 NaviController

AppBar 相当于 NaviBar

Flutter widget 是自动布局的

flutter01.png

三、小部件

1. 状态管理 StatelessWidget 静态页面 StatefulWidget 动态页面，通过实现 state 的泛型进行从新的 build

//  StatelessWidget 静态页面，直接实现布局，不可以修改内容，一般用 final 修饰常量
class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

// StatefulWidget 通过实现state来修改，进行重新build setState
class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

2. ListView 相当于 iOS 的 tableView

// datas 一个 list 对象数组

class ListViewDemo extends StatelessWidget {
   // 自定义方法
  Widget _itemForRow(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(10),
      child: Column(
        children: [
          Image.network(datas[index].imageUrl),
          SizedBox(height: 10,),
          Text(datas[index].name, style: TextStyle(
              fontWeight: FontWeight.w800,
              fontSize: 30,
              fontStyle: FontStyle.values[1]
          ),)
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return ListView.builder(itemCount: datas.length, itemBuilder: _itemForRow,);
  }
}

3. layout 布局 Row、Colum、stack

/*
* row x, col y, stack z
* */

/*
 * 关于主轴
 * spaceAround： 剩下的空间平均分布控 件周围
 * spaceEvenly: 剩下的和小部件一起分布
 * spaceBetween: 剩下的空间平均分布在之间
 * */
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      alignment: Alignment(0, 0), // 默认中心为x,y
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.ideographic,
        //alphabetic 英文字符
        //ideographic 中文字符
        children: [
          Expanded( // 填充布局
//            color: Colors.red,
            child: Icon(Icons.add, size: 120),
          ),
          Container(
            color: Colors.green,
            child: Icon(Icons.save_alt, size: 60,),
          ),
          Container(
            color: Colors.deepPurpleAccent,
            child: Icon(Icons.favorite, size: 30),
          ),
        ],
      ),
    );
  }
}

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        alignment: Alignment(0, -1),
        children: [
          Positioned(
            right: 10, // 相对于Stack
            child: Container(
              width: 200,
              height: 200,
              color: Colors.red,
              child: Icon(Icons.add, size: 120),
            ),
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
            child: Icon(Icons.save_alt, size: 60,),
          ),
          Container(
            width: 50,
            height: 50,
            color: Colors.deepPurpleAccent,
            child: Icon(Icons.favorite, size: 30),
          ),
          Container(
//            width: 300,
            height: 100,
//          color: Colors.green,
            child: AspectRatio(
              aspectRatio: 1/2, // 宽高比
            ),
          )
        ],
      ),
    );
  }
}

4. RichText 和 TextSpan 富文本

RichText(
  text:
      TextSpan(text: "flutter", style: TextStyle(fontSize: 20), children: [
    TextSpan(
        text: "Rich",
        style: TextStyle(fontSize: 30, color: Colors.red),
        children: [
          TextSpan(
              text: "TextSpan",
              style: TextStyle(fontSize: 15, color: Colors.green))
        ])
  ]),
);

5. 其他

padding: EdgeInsets.all(30), // 向内填充
margin: EdgeInsets.all(20), // 向外填充

  // final 编译时
  // const 运行时

${_title}, $_autor // 获取变量 使用$
    
// dart 里没有析构函数，自带垃圾回收机制
// final 修饰的不可变
// const 修饰可以节约性能
// {可选参数}
    
    
  // model
class CarModel {
  final String name;
  final String imageUrl;

  // 构造函数
  const CarModel({this.name, this.imageUrl});

//  CarModel.fromList(List<dynamic> list){
//    name = list[0];
//    imageUrl = list[1];
//  }
//
//  // 重定向构造函数
//  CarModel.defaluts(String name, String imageUrl):this(name: name, imageUrl: imageUrl);
}

总结

• flutter 使用流水式布局，一个一个控件的输入，有点类似于 css 可以借助不同的布局方式来调整视图的展现方式，通常使用 row \ colum \ stack
• 视图主要的通过state的状态管理来修改状态
• 简单来说还是有很多和iOS = objective-c、swift有一点相似之处，看了SwiftUI感觉都是一样的啦~