Flutter开发移动端APP的入门教程及简单介绍

Dart&Flutter环境搭建

安装 dart SDK 如果只开发移动应用,那么您不需要Dart SDK; 只需安装Flutter。

这里就直接安装 Flutter (dart SDK已经集成在Flutter中) 由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

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

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

下载地址 : https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

配置环境变量:

export PATH=`pwd`/flutter/bin:$PATH(添加路径)

export PATH=/Users/mugong/Desktop/workspace/flutter/bin:$PATH(这 是我的)

 

安装 Xcode 或者 Android Studio (我安装的Android Studio)

运行 flutter doctor

Flutter开发移动端APP的入门教程及简单介绍

 

vs code (我的编辑器)

调用 View>Command Palette… 输入 ‘install’, 然后选择 Extensions: Install Extension action

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

重新启动 VS Code

Android Studio Flutter插件 , Dart插件

 

创建一个新flutter应用

Flutter开发移动端APP的入门教程及简单介绍

在终端 输入 flutter run 在 initState函数中打印出hello world!至此flutter框架已经搭建完成。

Dart 语言 数据类型

dart语言提供所有现代语言提供的所有基本数据类型。

Numbers int 和 double

Strings

Booleans

Lists

Maps Map 是一个键值对相关的对象

int x = 100; double y = 1.1;

String s = ‘This is a string‘;

bool isDoorOpen = false;

list list= [1,2,3,4];

map map= { ‘key1‘: ‘value1‘, ‘key2‘: ‘value2‘, ‘key3‘: ‘value3‘ };

目前Dart中int和double是num的子接口,所以声明变量类型时可以使用num来替代int或double.

flutter 布局思路

参考文档: https://flutterchina.club/tutorials/layout/#approach

 

常见布局widgets

1.多个子元素的布局 Row 、Column、Stack 等

2. 单个 子元素的布局Container 、 Padding 、Center 等

Row :控件来水平排列子控件.

Column: 控件垂直排列子控件.

Container : 给一个组件添加 padding, margins, 边界(borders), 背景颜色或其它装饰(decorations)。

Stack : 在一个widget上面盖上另一个widget。

ListView : ListView能以列的形式展示数据。当内容超过渲染范围时,自动提供滚动的功能。

Center :在一个widget 中居中显示。
Padding:给子节点设置padding属性,设置内边距属性, (Flutter中并没有单独的Margin控件)。

Text: 显示“ 文本”单个样式的文本字符串小组件。

有状态组件(Stateful widget)与 无状态组件(StatelessWidget)

无状态组件(stateless widget),无状态组件不提供可变状态维护,无状态组件仅根据其属性来渲染, 无状态组建的写法:

class MyToolBar extends StatefulWidget{

    MyToolBar({ this.title }); final Widget title)

    Widget build(BuildContext context){

    return new Container( child: new Row([ new IconButton(icon: ‘navigation/menu‘), ]) );

 }

}

 

有状态组件(stateful Widget),组件自己维护状态,组件渲染由SetState方法调用,更具state的变化差异来更新渲染。所有的stateful widget都是建立在stateless widget上的。

class Counter extends StatefulWidget {

      _CounterState createState() => new _CounterState();

}

class _CounterState extends State<Counter> {

       int _count = 0;

       void _increment() {

          setState(() { ++_count; });

      }

    Widget build(BuildContext context) {

        return new Container(

           child: new Center(

                child: new RaisedButton(

                onPressed: _increment,

               child: new Text(‘click count : ${_count}‘))));

    }

}

Flutter的父子通信

父组件向子组件传值

父组件

String modelKey=‘‘;

new Container( child:Input({modelKey: modelKey}) }

子组件

Input({modelKey:this.modelKey})

     Input extends StatelessWidget {

     final modelKey;

     Input ({modelKey:modelKey});

     Widget build(BuildContext context) { }

}

子组建向父组建传值

父组件

void onDataChange(val) { setState(() { data = val; });

 new ChildTwo(data4Two: data4Two, callback: (val) => onDataChange(val)),

子组件

class ChildTwo extends StatefulWidget {

      ChildTwo({data4Two: this.data4Two,callback: this.callback})

      final callback; String data4Two;

       child: new Center( onPressed: callback(‘111111111‘), child: new Text(‘to父组件‘) )

}

第三方库的下载

在 pubspec.yaml

    dependencies:

          flutter: sdk:

              flutter

          cupertino_icons: ^0.1.0

          english_words: ^3.1.0

  拉取声明的第三方库到本地工程 flutter packages get 注意 :yaml配置文件对于缩进要求十分严格!!!!!!!

   import ‘package:flutter/material.dart‘;

    import ‘package:english_words/english_words.dart‘;


flutter 中从接口中取到的数据要进行反json序列化

 

Flutter开发移动端APP的入门教程及简单介绍

上一篇:@mapper个人理解


下一篇:cshtml 中的 AppState = Context.Application 和 控制器中的 Application 也相等