モバイル端末APPと簡単な入門チュートリアルのフラッター開発

ダーツ&フラッターは、環境構築します

あなたが唯一のモバイルアプリケーションを開発するためにダーツSDKをインストールする場合は、ダートSDKは必要ありません。ただフラッターをインストールします。

ここでは、(ダーツSDKがでフラッターに統合されている)による国内のアクセスへの中国の開発者のための一時的なイメージを構築回フラッター、フラッターの公式で制限される場合がありフラッター直接インストールされている、我々はユーザー環境変数に追加環境変数として指定できます。

輸出PUB_HOSTED_URL = HTTPS://pub.flutter-io.cn

輸出FLUTTER_STORAGE_BASE_URL = HTTPS://storage.flutter-io.cn

ダウンロード:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

設定の環境変数:

輸出PATH = `pwd`は/フラッター/ binに:$ PATHに(パスを追加します)

輸出PATH = /ユーザ/ mugong /デスクトップ/ワークスペース/フラッター/ binに:$ PATHに(これは私です)

 

(私は、Android Studioのインストール)のXcodeやAndroid Studioをインストール

実行フラッター医師

 

コード対(私の編集者)

その後、拡張機能を選択し、[表示]> [コマンドパレットを呼び出し...入力して「インストール」:拡張アクションをインストールします。

検索ボックスで、フラッタを入力して、検索結果の一覧で「フラッター」を選択し、[インストール]をクリックします選択し「OK」

再起動VSコード

Androidのメーカーフラッタープラグ、ダートプラグ

 

新しいアプリケーションを作成しますフラッター

入力端子には、ハローinitState機能で実行され、世界のフラッタをプリントアウト!これまでのところ、フラッターフレームが完成した構造となっています。

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序列化

 

おすすめ

転載: www.cnblogs.com/wanDPS/p/10929863.html