vlambda博客
学习文章列表

一、 Flutter介绍与配置

1. Flutter介绍

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter的目标是使同一套代码同时运行在iOS和Android系统上，并且拥有媲美原生应用的性能，Flutter甚至提供了两套控件来适配Android和iOS（滚动效果、字体和控件图标等等），为了让App在细节处看起来更像原生应用。

2. 下载

• https://flutter.io/docs/get-started/install

3. 更新环境变量

mac

export PATH=`pwd`/flutter/bin:$PATHexport PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

windows

• 转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”

• 在“用户变量”下检查是否有名为“Path”的条目:

• 如果该条目存在, 追加 flutter\bin的全路径，使用 ; 作为分隔符.

• 如果条目不存在, 创建一个新用户变量 Path ，然后将 flutter\bin的全路径作为它的值.

• 在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也添加它们。

• 重启Windows以应用此更改

4. 运行 flutter doctor

5. 编辑器

• VScode

• 启动 VS Code

• 调用 View>Command Palette…

• 输入 ‘install’, 然后选择 Extensions: Install Extension action

• 在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

• 选择 ‘OK’ 重新启动 VS Code

• Android Studio

• 启动Android Studio.

• 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).

• 选择 Browse repositories…, 选择 Flutter 插件并点击 install.

• 重启Android Studio后插件生效.

6. 模拟器

• IOS 模拟器设置

• 安装 Xcode

• Xcode-open Developer tool- Simulator

• Android 模拟器设置

• 在机器上启用 VM acceleration .

• 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.

• 选择一个设备并选择 Next。

• 为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image .

• 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.

• 验证AVD配置是否正确，然后选择 Finish。

  
  

二、 Flutter HelloWord

1. 项目文件

—Android 安卓配置文件

—ios IOS配置文件

—build 打包生成目录

—lib 开发目录

—main.dart 入口文件

—pubspec.yaml 项目依赖配置

2. HelloWorld

• 项目入口文件 main.js

• 启动方法 void main()

void main(){} //定义入口方法

• 根函数 runApp()

void main(){ runApp( //定义内容 );}

• 一切皆为widget(组件)

• 在 Flutter 中，一切的显示都是 Widget 。Widget 是一切的基础

• Widget 和 Widget 之间通过 child: 进行嵌套。

• 你需要做的就是在 widget 中堆积你的布局

• UI库 material

import 'package:flutter/material.dart';

• Material 是一种标准的移动端和web端的UI框架，是一套google的设计规范，flutter项目以meterial为基础

3. Flutter 部件

• Center小部件：定义一个居中的部件

Center(child: //部件);

• Text小部件

Text( 'hello', textDirection: TextDirection.ltr,)

        若不写textDirection会报错

• 自定义部件

class Hello extends StatelessWidget{ //创建一个继承自无状态部件的自定义部件 Widget build (BuildContext context){ //实现一个build函数, 构建自身 return Center( //返回一个部件 child: ); }}

• StatelessWidget：无状态部件

4. 文字和文字样式

Text( 'hello', textDirection: TextDirection.ltr, style: TextStyle( fontSize: 40.0, color: Colors.red, fontWeight: FontWeight.bold ),),

• 文字内容

• TextStyle，用来定义Text中文字的各种属性。

• 文字颜色

• 文字大小

• 文字粗细

  
  

• 文本方向

三、 Flutter界面

1. MaterialApp 界面

• MaterialApp构成

• MaterialApp 代表使用纸墨设计（Material Design）风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。

• title ：在任务管理窗口中所显示的应用名字，这个 Title 是用来定义任务管理窗口界面所看到应用名字的。在原生 Android 系统中点击圆圈 Home 按钮右边的方块按钮就会打开多任务切换窗口。

• home ：应用默认所显示的界面 Widget，用来定义当前应用打开的时候，所显示的界面。

MaterialApp(title: 'Flutter Tutorial',// 指明了这个控件的标题home: Scaffold( // 指明了这个控件的主体appBar: AppBar(),body:),)

2. 顶部工具栏和功能按钮

• leading 部件

• 创建一个menu部件

• 使用Icon部件，以及预置图标

• actions 部件

  
  

• 创建一组actions动作

• 使用小图标

appBar: AppBar( title: Text( 'demo' ), leading: Icon(Icons.menu), actions: <Widget>[ Icon(Icons.search), ], elevation: 0.0,),

三、 Flutter界面 - 边栏
1. Drawer
 
   
   
 

  
    
    
  
添加使用一个Drawer左侧边栏部件
 
   
   
 
2.  DrawerHeader
 
   
   
 

  
    
    
  
添加一个 `` 边栏头部部件
  
    
    
  
定义装饰部件 decoration
  
    
    
  
定义边栏头部的颜色
 
   
   
 
3. 使用列表项的边栏小案例
 
   
   
 

  
    
    
  
使用ListView部件来构建一个简单列表项
  
    
    
  
 
   
设置列表标题 title
 
   
设置列表小图标 trailing
 
   
设置点按动作 onTap
 
   
标题内容
 
   
标题对齐方式
 
   
预置图标
 
   
图标颜色
 
   
图标尺寸
 
   
设置装饰 decoration
 
   
设置背景颜色 color
 
   
设置padding内边距
 
   
定义children 一组列表
 
   
定义边栏头部 DrawerHeader
 
   
定义列表项 ListTile
 
  
 
   
   
 
 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
drawer: Drawer( //边栏插件child: ListView( //构建列表 children: <Widget>[ //列表项 DrawerHeader( //边栏头部 child: Text('头部'), //头部文字 decoration: BoxDecoration( //头部装饰 color: Colors.blue, //背景颜色 ), ), ListTile( //列表项 title: Text( //列表项标题 '列表', //列表项文字 textAlign: TextAlign.right, //文字对齐方式 ), trailing: Icon(Icons.message), //列表小图标 onTap: () {}, //点击动作 ), ],),)
 
   
   
 
五、 常用组件
1. 使用和查看组件
 
   
   
 

  
    
    
  
可以在VScode或者AndroidStudio中直接查看组件的构造函数
 
   
   
 
2. 文字组件
 
   
   
 

  
    
    
  
style 文字样式
  
    
    
  
maxLines 行数
  
    
    
  
overflow 溢出
 
   
   
 
 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
Text('Hello',style: TextStyle(fontSize: 40.0,color: Colors.yellow,fontWeight: FontWeight.bold),maxLines: 3,overflow: TextOverflow.ellipsis,),
 
   
   
 
3. 文字组件
 
   
   
 

  
    
    
  
RichText
  
    
    
  
TextSpan
 
   
   
 
RichText(

 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
text: TextSpan( text: '你好', style: TextStyle( color: Colors.red ), children: [ TextSpan( text: '世界', style: TextStyle( color: Colors.blue ) ) ]),),
 
   
   
 
4. 常用布局组件
 
   
   
 

  
    
    
  
Column
  
    
    
  
 
   
设置垂直对齐组件
 
   
设置主轴对齐方式
 
   
设置交叉抽对齐方式
 
  
  
    
    
  
Row
  
    
    
  
 
   
设置水平对齐组件
 
   
设置主轴对齐方式
 
   
设置交叉轴对齐方式
 
  
 
   
   
 
6. Container
 
   
   
 

  
    
    
  
Container
  
    
    
  
 
   
设置padding
 
   
设置margin
 
   
设置color
 
   
设置尺寸 width height
 
  
 
   
   
 
 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
Container(width: 100.0,height: 100.0,color: Colors.red,padding: EdgeInsets.all(10.0),margin: EdgeInsets.all(10.0),child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[
 ],),)
 
   
   
 
 
   
   
 

  
    
    
  
decoration容器装饰
  
    
    
  
 
   
border属性
 
  
  
    
    
  
分别定义边框效果
  
    
    
  
统一定义边框效果
 
   
   
 
 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
Container(decoration: BoxDecoration( color: Colors.red, border: Border( top: BorderSide( color: Colors.blue, width: 3.0, style: BorderStyle.solid ) ), border: Border.all( color: Colors.blue, width: 3.0, style: BorderStyle.solid )),child: ...,)
 
   
   
 
7. 圆角
 
   
   
 

  
    
    
  
borderRadius only 分别定义圆角
  
    
    
  
borderRadius circular 统一定义圆角
 
   
   
 
 
   
   
 

  
    
    
  
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
   
 
  
  
    
    
  
Container(decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.only( topLeft: Radius.circular(10.0), topRight: , bottomLeft: , bottomRight: , ) borderRadius: BorderRadius.circular(10.0)),child: ,),