flutter学习之旅(二)

如果不知道怎么安装编写可以查看这篇

创建项目

另一个创建方法

flutter create 项目名
1

热部署

vscode 热部署

vscode很简单：可以通过Debug进行调试

使用flutter查看设备

flutter devices
1

如图所见我现在用的是windows所以，我们检测不到ios因为

我们看看我的华为手机(HarmonyOS)

Flutter 真机调试

识别到的手机

#连接上手机后直接在项目目录中使用
flutter run
1
2

注意: 时间会很久

[!] Gradle threw an error while downloading artifacts from the network.

我下载的版本是gradle-7.4-all.zip

把这个文件放在C:\用户\你的用户名\.gradle里(没有.gradle可以尝试以下几张图来打开)

之后我们进入项目根目录\android\gradle\wrapper\gradle-wrapper.properties

fluuter run
1

时间会很久
会生成一个项目根目录\build\app\outputs\flutter-apk\app-debug.apk文件
之后说是Installing build\app\outputs\flutter-apk\app.apk...需要在你Anroid手机上确认安装

目录结构

• andriod:安卓平台相关代码
• ios: 苹果平台相关代码
• linux: Linux平台相关代码
• macos:MacOS平台相关代码
• windows: Windows平台相关代码
• lib: Flutter相关代码，主要编写程序的入口文件夹
• test: 用于存放测试代码
• pubspec.yaml: 保存了我们项目的所有依赖、版本号和配置信息(重要)
• analysis_options.yaml: 分析dart语法的文件。老项目生成新项目有警告信息的话可以删除此文件

程序入口

在lib/main.dart(主文件)文件中使用flutter必须要引入flutter给我们提供的import 'package:flutter/material.dart';才行。之后就像我们C一样要有一个入口文件void main(){},在入口里面需要调用我们flutter里面提供的函数runApp()

import 'package:flutter/material.dart';

void main(){
  runApp(flutter组件);
}
1
2
3
4
5

Center

它可以让我们的内容居中

import 'package:flutter/material.dart';

void main() {
//可以是Center也可以是const Center()
  runApp(const Center());
}
1
2
3
4
5
6

const的好处就是多个相同的实例它可以共享存储空间,重新flutter build不会再次编译const的内容

参数

child: 孩子。可以在里面放入组件

import 'package:flutter/material.dart';

void main() {
  runApp(const Center(
    child: Text(
      "你好flutter",
      textDirection: TextDirection.ltr,
      style: TextStyle(color: Colors.blue, fontSize: 80),
    ),
  ));
}
1
2
3
4
5
6
7
8
9
10
11

• textDirection: 文本方向。ltr:lefet to right(从左向右);rtl:从右向左

Text也是一个常量组件，为什么不加const?你可以理解child:常量组件等同于const array=[1,2,3]

• style: 文本样式。查看底层是通过TextStyle来进行修饰的
  
• color:通过final Color? color。里面的参数可以是Colors.颜色或者Color.fromRGBO(r, g, b, opacity)来定义
• fontSize:改变字体大小。传入的是一个double类型的数据

装饰我们的App

MaterialApp和Scaffold主要是用来装饰App

MaterialApp

MaterialApp是一个方便的Widget。它封装了应用程序实现Material Design所需要的一些Widget。一般作于顶层widget使用

常用属性

• home(主页)
• title(标题)
• color(颜色)
• theme(主题)
• route(路由)

Scaffold

Scaffold是Material Design布局结构的基本实现。此类提供了drawer,snackbar和底部sheet的API

主要属性

• appBar(显示在页面顶部的一个AppBar)
• body(当前页面的主要内容Widget)
• drawer(抽屉菜单控件)

import 'package:flutter/material.dart';

void main() {
  runApp(new Scaffold(
    appBar: new AppBar(
      title: const Text("我的应用"),
    ),
    body: new Center(
      child: const Text("Hello"),
    ),
  ));
}
1
2
3
4
5
6
7
8
9
10
11
12

我们需要创建自定义组件(其实全写在runApp中也挺乱的)

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

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

StatelessWidget

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  //实现build()的一个抽象方法
  //Use key in widget constructors: 自定义组件需要有一个key
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "你好Flutter,我是一个自定义组件",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          color: Color.fromRGBO(255, 255, 255, 1),
          fontSize: 40,
        ),
      ),
    );
  }
}

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

快捷方式
Awesome Flutter Snippets

statelessW
1

Container容器组件

与html中的

相似

alignment: 容器里面组件的位置

• topCenter: 顶部居中对齐
• topLeft: 顶部右对齐
• center:水平垂直居中对其
• centerLeft:垂直居中水平左对齐
• centerRight: 垂直居中水平右对齐
• bottomCenter: 底部居中对齐
• bottomLeft: 底部居左对齐
• bottomRight: 底部居右对齐

decoration: 装饰容器

decoration:BoxDecoration(color:Colors.blue,border:Border.all(color:Colors.red,width:2.0),borderRadius:BorderRadius.circular((8)),boxShadow:[BoxShadow(color:Colors.blue,offset:Offset(2.0,2.0),blurRadius:10.0,)]););//圆角
1

gradient:LinearGradlient(colors:[Colors.red,Colors.orange]);//LinearGradlient:背景线性渐变;RadialGradlient:径向渐变
1

• margin:外边距&padding:内边距

与html-css是一样的

• transform

让Container容易进行一些旋转之类的

transform:Matrix4.rotation(0.2)
1

• height:容器高度
• width:容器宽度
• child: 容器子元素
• Text组件

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  //实现build()的一个抽象方法
  //Use key in widget constructors: 自定义组件需要有一个key
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
        //Container不是一个常量构造函数，所以要在外部取消const
        child: Container(
      alignment: Alignment.center, //配置Container容器元素的访问
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        //BoxDecoration是一个常量构造函数
        color: Colors.yellow,
        border: Border.all(
          //边线,对应css:border
          color: Colors.red,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(100), //形状,css:border-radius
        boxShadow: [BoxShadow(color: Colors.white, blurRadius: 10.0)],
        //LinearGradient:背景线性渐变; RadialGrandient径向渐变
        gradient:
            const LinearGradient(colors: [Colors.red, Colors.yellow]), //颜色渐变
      ), //阴影,css:box-shadow
    ));

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

Button样式编写

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: const Text("hello world"),
        ),
        body: Column(
          children: const [MyButton()],
        )),
  ));
}

class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 40,
      margin: const EdgeInsets.all(10),
      // margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      padding: const EdgeInsets.all(20),
      decoration: const BoxDecoration(color: Colors.blue),
      // transform: Matrix4.translationValues(10, 0, 0), //css: transform。translationValues(位移)
      // transform: Matrix4.rotationZ(0.2), //旋转
      transform: Matrix4.skewY(0.3),
    );
  }
}

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

Text组件

TextStyle样式