flutter一些学习笔记_flitter学习

Flutter语言（学习网站：Flutter教程 - Flutter中文网 (flutterchina.club)）

flutter的下载安装：

注意 国内访问flutter可能会受限制，可下载国内镜像

PUB_HOSTED_URL   https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn
1
2

安装

1、电脑配置JDK(下载jdk，配置jdk )

2、下载安装Android studio

3、下载配置flutter sdk(flutter -v检验是否配置成功)

4、配置flutter国内镜像

5、输入flutter doctor 命令检测环境是否配置成功

（如果出现“!",命令行输入 flutter doctor --android-licenses）

6、Android studio 安装flutter 插件(config->Plugins->flutter)

7、创建项目（第一次创建时间非常长，可能有十几分钟）

报错(下载失败)——点击File->Sync Project With Gradle Files 重新下载Gradle。

Flutter Android 真机调试

1、必备条件：

​ 准备Android 手机 ；手机、电脑开启调试模式；数据线吧手机电脑相连；手机对应的sdk版本必须安装（）

虚拟机调试（模拟器和自带，自带的模拟器较慢安装较麻烦，推荐第三方模拟器）

在Vscode中开发运行Flutter应用

1、安装flutter插件、flutter widget snippets插件

2、vscode连不上模拟器的解决方案 ：

​ cd到模拟器D:xxxxx\bin目录下 运行 nox_adb.exe connect 127.0.01:62001

3、运行flutter项目；r键：点击后热加载，也算是重新加载

​ p键：显示网格，可以较好的掌握布局情况，

​ o键：切换Android 和ios的预览模式

一、Flutter目录结构介绍、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件

1.flutter目录结构介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D5q8zPH0-1640866944947)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211016195511058.png)]

build运行项目生成的编译目录，libflutter相关代码，自己放置资源（自己编写的代码），pubspec.yaml项目配置文件（配置项目名称，项目依赖等，一般存放第三方库的依赖）

2、flutter 入口文件、入口方法

每个flutter项目里面的lib目录里面都有一个main.dart，这个文件就是flutter的入口文件。

main方法是dart的入口方法，runApp方法 是flutter提供的入口方法，可以调用flutter提供的组件，myApp是自定义的一个组件，flutter所有的组件都是类。

void main() {
  runApp(new Center(//实例化时new可以省略
      child: new Text(
    '你好Fluter',
    textDirection: TextDirection.ltr,
  )));
}
1
2
3
4
5
6
7

实现一些简单的输出

自定义组件（flutter自定义组件就是一个类，这个类需要继承StaelessWidget/StateWidget 抽象类）

​ StatelessWidget是无状态组件，状态不可变的widget

​ StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变

//自定义组件
import 'package:flutter/material.dart';

void main() {
  runApp(Myapp());
}

//自定义组件
class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        //实例化时new可以省略
        child: Text(
      '你好Fluter 我是小栗子',
      textDirection: TextDirection.ltr,
     
    ));
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、用MaterialApp和Scaffold两个组装饰App

MaterialApp封装了应用程序实现Material Design 所需要的一些Widget,一般作为顶层widget使用，常用的属性：home（主页）title（标题）color(颜色) theme（主题） routes(路由)

Scaffold的几个属性：

appBar-显示在界面顶部的一个AppBar

body-当前页面所显示的主要内容Widget

drawer-抽屉菜单控制

import 'package:flutter/material.dart';

void main() {
  runApp(Myapp());
}

//自定义组件
class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(primaryColor: Colors.pink),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        //实例化时new可以省略
        child: Text(
      '你好Fluter 我是小栗子',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0, //和数字有关的都是double类型的。
        color: Colors.pink, //或者 color:Colors.fromRGBO(224,233,214，0.5)
      ),
    ));
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

示例

二、flutter Container组件、Text组件详解

Container容器组件，相当于view,div,可以设置颜色

import 'package:flutter/material.dart';

void main() {
  runApp(Myapp());
}

//自定义组件
class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter'),
          ),
          body: HomeContent(),
        ),
        theme: ThemeData(primaryColor: Colors.purple.shade100));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        //实例化时new可以省略
        child: Container(
      //child子元素
      child: Text(
        '小栗子',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34