flutter学习总结(语法,组件,布局,和路由)

一.helloworld应用

按国际惯例,写来一个hello world应用跑一遍.

创建项目

启动 VS Code
调用 View>Command Palette…
输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
输入 Project 名称 (如myapp), 然后按回车键
指定放置项目的位置，然后按蓝色的确定按钮
等待项目创建继续，并显示main.dart文件
开始代码,写在根目录\lib\main.dart文件中，这就是Flutter主文件.

基本思路:

引入flutter包

入口函数

声明MyApp类

重写build方法,它返回一个MaterialApp风格的组件

在Material组件的home属性里赋值一个Scaffold组件

在Scaffold组件里创建appBar和body

在body的中间区域添加hello world文本

填充代码：

// flutter相当于一个UI库,所以使用前要引入flutter
import 'package:flutter/material.dart';

// 入口函数
void main() => runApp(MyApp());

// 声明MyApp类
class MyApp extends StatelessWidget {
   
// 重写build方法,它返回一个Material风格的组件
  @override
  Widget build(BuildContext context) {
   
// 在MaterialApp组件的home属性里赋值一个Scaffold组件
    return MaterialApp(
      title: "welcome",
      home: Scaffold(
// 在Scaffold组件(相当于脚手架的东西)里创建appBar和body
        appBar: AppBar(title: Text('This is header')),
// 在body的中间区域添加hello world文本
        body: Center(child: Text('hello world')),
      ),
      debugShowCheckedModeBanner: false,//去掉右上方的bug
    );
  }
}

效果：
精简版基本模板:

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
   
  @override
  Widget build(BuildContext context){
   
    return MaterialApp(
      title:'test',
      home:Scaffold(
        appBar: new AppBar(
          title:new Text("这是头部"),
          
        ),
        body:new Text('内容')
      )
    );
  }
}

也许你对上面的语法还不够了解，但你不必惊慌，我会进行说明，那先来看一下Dart中的函数。

Dart语法Function函数

Dart是面向对象的语言，即使是函数也是对象，并且属于函数类型的对象。
比如我们写的上面第二行代码，就是一个函数

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

上面是简写，普通写法如下：

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

总结：发现Dart语言是不能省略结束符“；”的。

二.常用组件

Text()组件介绍

这个是文本组件,是非常常见的.记住在flutter中一切东西都是组件(组件英文名叫widget).

Text()组件的属性介绍:

textAlign文字对齐属性

center: 文本以居中形式对齐,这个也算比较常用的了。
left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
right :右对齐，使用频率也不算高。
start:以开始位置进行对齐，类似于左对齐。
end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

总结起来，也就算三个对齐方式，left(左对齐)、center（居中对齐）、right（右对齐）。我们来看一下具体代码写法：

内容写在第一个参数里,属性以对象值的方式写.

maxLines属性最多显示的行数

maxLines属性设置显示的行数,比如我们给1,文字只能显示出1行了,多的自动消失.

overflow超出显示属性

有三个值:
clip:直接切断,
ellipsis:后面显示三个省略号,
fade:直接切断,并带有整行上下渐变的效果.

注意值的写法是要加上Text,用TextOverflow点出各自的值.

style属性

style属性内容比较多:

inherit 是否将null值替换为祖先文本样式中的值（例如，在TextSpan树中）。如果为false，则没有显式值的属性将恢复为默认值：白色，字体大小为10像素，采用无衬线字体。
color 字体的颜色
fontSize 文字大小,单位为像素，如果没有指定大小则默认为14像素，可以乘以textScaleFactor来增加字体大小以便用户更加方便的阅读
fontWeight 字体厚度，可以使文本变粗或变细
fontStyle 字体变形，有两种 FontStyle.normal（字体直立）， FontStyle.italic（字体倾斜）
letterSpacing 字母间距，整数拉开字母距离，若是负数则拉近字母距离
wordSpacing，单词间距，同上
textBaseline 用于对齐文本的水平线
height 文本行高，为字体大小的倍数
locale 用于选择区域特定符号的区域设置
background 文本的背景颜色
shadows 文本的阴影可以利用列表叠加处理，例如shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)], color即阴影的颜色， offset即阴影相对文本的偏移坐标，blurRadius即阴影的模糊程度，越小越清晰
decoration 文字的线性装饰，比如 underline 下划线， lineThrough删除线
decorationColor 文本装饰线的颜色
decorationStyle 文本装饰线的样式，比如 dashed 虚线
debugLabel 这种文本样式的可读描述，此属性仅在调试构建中维护。

具体的可以看官网:https://api.flutter.dev/flutter/painting/TextStyle-class.html#painting.TextStyle.1

小技巧快速打开虚拟机的方法:依次点击下面的即可

Container组件的使用

Container组件相当于我们的div标签,它的作用就是方便我们进行布局的.

alignment属性

alignment属性的作用是针对的是Container内child的对齐方式,也就是容器子内容的对齐方式,并不是容器本身的对齐方式.

常用属性有:

bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight： 顶部居左对齐。

总结规律:纵向在前,横向在后.

宽width,高height,背景颜色color(注意color不是字体颜色,而是背景颜色)设置

padding和margin属性

跟我们的css样式一样,但注意点写法:值是要带常量声明

padding:const EdgeInsets.all(20.0)

这句的意思是设置Container的内边距是20，左右上下全部为20，这看起来非常容易。那我们再加大一点难度。如果上边距为30，左边距为10，这时候EdgeInsets.all()就满足不了我们了。
我们用EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求，LTRB分别代表左、上、右、下。

decoration修饰属性

背景设置:
decoration属性主要是用来设置背景和边框.
比如我们要设置渐变背景,上面的color背景只能设置单一颜色,我们可以用decoration来设置(与color不能同时存在,只能留一个)
设置方法:这时候就要用new BoxDecoration()这个组件.写法如下:

边框设置:(这个不需要new)

border:Border.all(width:2.0,color:Colors.purple)

效果:

附完整代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
   
  @override
  Widget build(BuildContext context){
   
    return MaterialApp(
      title:"hello widget",
      home:Scaffold(
        body:Center(
          child:Container(
            child:new Text('hahahahahahahahahahahahahhahahahahahahahahahahahahhahahahahahahahahahahahahhahahahahahahahahahahahahhahahahahahahahahahahahah',
            style:TextStyle(
              fontSize:20.0
            )
            ),
            alignment:Alignment.topLeft,
            width:500.0,
            height: 400.0,
            
            padding:const EdgeInsets.all(20.0),
            margin:const EdgeInsets.all(30.0),
            decoration:new BoxDecoration(
                  gradient:const LinearGradient(
                    colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
                  ),
                  border:Border.all(width:5.0,color:Colors.purple)
                )
           

          )
        )
      )
    );
  }
}

遇到的坑点:记住color背景属性和decoration属性不能同时存在,存在会报错.

Image图片组件

图片引入的几种方式:

Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
Image.memory: 加载Uint8List资源图片(相当于内存一样),这个我目前用的不是很多.

图片fit填充属性的设置

填充属性值有以下几种:

BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

BoxFit.contain:全图显示，显示原比例，可能会有空隙。

BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

图片的背景颜色混合模式设置

color：是要混合的颜色，如果你只设置color是没有意义的。
colorBlendMode:是混合模式，相当于我们如何混合

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果