ダーツ&フラッターは、環境構築します
あなたが唯一のモバイルアプリケーションを開発するためにダーツ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序列化