前言

1、Flutter是Google使用Dart語(yǔ)言開(kāi)發(fā)的移動(dòng)應(yīng)用開(kāi)發(fā)框架，使用一套Dart代碼就能構(gòu)建高性能、高保真的iOS和Android應(yīng)用程序，并且在排版、圖標(biāo)、滾動(dòng)、點(diǎn)擊等方面降低差異。
2、Flutter不是黑科技，應(yīng)用程序的代碼總是以一種非常合理，可以解釋的方式的運(yùn)行著，只是需要去了解而已。Flutter能夠在iOS和Android上運(yùn)行起來(lái)，依靠的是一個(gè)叫Flutter Engine的虛擬機(jī)，F(xiàn)lutter Engine是Flutter應(yīng)用程序的運(yùn)行環(huán)境，開(kāi)發(fā)人員可以通過(guò)Flutter框架和API在內(nèi)部進(jìn)行交互
3、Flutter的優(yōu)勢(shì)（1）高效率 用一套代碼庫(kù)就能開(kāi)發(fā)iOS和Android應(yīng)用;使用新型的、表現(xiàn)力強(qiáng)的語(yǔ)言和聲明式的方法，用更少的代碼來(lái)做更多的事情;開(kāi)發(fā)調(diào)試更容易方便 ,可以在應(yīng)用程序運(yùn)行時(shí)更改代碼并重新加載查看效果，也就是熱重新加載
（2）創(chuàng)建美觀、高度定制的用戶(hù)體驗(yàn) ,Flutter框架內(nèi)置了一組豐富的質(zhì)感設(shè)計(jì)控件

內(nèi)容

一、全世界的第一個(gè)簡(jiǎn)單的輸出小李子：

import 'package:flutter/material.dart'; void main() { runApp(new Center(child: new Text('你好，靈機(jī)！', textDirection: TextDirection.ltr))); } 

二、基礎(chǔ)控件：
<一>、簡(jiǎn)單控件：

1. Text控件即容器，是一個(gè)常用的控件，下面的實(shí)例有7個(gè)不同樣式的文本控件

class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('文本控件'), ), body: new Column( children: <Widget>[ new Text( '紅色+黑色刪除線+25號(hào)', style: new TextStyle( color: const Color(0xffff0000), decoration: TextDecoration.lineThrough, decorationColor: const Color(0xff000000), fontSize: 25.0, ), ), new Text( '橙色+下劃線+24號(hào)', style: new TextStyle( color: const Color(0xffff9900), decoration: TextDecoration.underline, fontSize: 24.0, ), ), new Text( '虛線上劃線+23號(hào)+傾斜', style: new TextStyle( decoration: TextDecoration.overline, decorationStyle: TextDecorationStyle.dashed, fontSize: 23.0, fontStyle: FontStyle.italic, ), ), new Text( 'serif字體+24號(hào)', style: new TextStyle( fontFamily: 'serif', fontSize: 26.0, ), ), new Text( 'monospace字體+24號(hào)+加粗', style: new TextStyle( fontFamily: 'monospace', fontSize: 24.0, fontWeight: FontWeight.bold, ), ), new Text( '天藍(lán)色+25號(hào)+2行跨度', style: new TextStyle( color: const Color(0xff4a86e8), fontSize: 25.0, height: 2.0, ), ), new Text( '24號(hào)+2個(gè)字母間隔', style: new TextStyle( fontSize: 24.0, letterSpacing: 2.0, ), ), ] ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ContainerDemo(), ), ); } 

2. Image控件即圖片控件，是顯示圖像的控件，Image控件有多種構(gòu)造函數(shù)：

(1)new Image，用于從ImageProvider獲取圖像。
(2) new Image.asset，用于使用key從AssetBundle獲取圖像。
(3) new Image.network，用于從URL地址獲取圖像。
(4) new Image.file，用于從File獲取圖像。

下面是一個(gè)從URL地址獲取圖像的實(shí)例，并通過(guò)scale屬性設(shè)置縮放比例：

import 'package:flutter/material.dart'; class ImageDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('從URL地址獲取圖像'), ), body: new Center( child: new Image.network( 'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg', scale: 2.0, ), ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ImageDemo(), ), ); } 

下面是一個(gè)從本地文件目錄中獲取圖像的實(shí)例：

class ImageDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('從本地獲取圖像'), ), body: new Center( child: new Container( decoration: new BoxDecoration( backgroundImage: new BackgroundImage( image: new AssetImage('images/flutter.jpeg'), ), ) ) ), ); } }void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ImageDemo(), ), ); } 

<二>內(nèi)容布局：
1.水平布局
Row控件即水平布局控件，能夠?qū)⒆涌丶脚帕?/p>

import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('水平方向布局'), ), body: new Row( children: <Widget>[ new RaisedButton( onPressed: () { print('點(diǎn)擊紅色按鈕事件'); }, color: const Color(0xffcc0000), child: new Text('紅色按鈕'), ), new Flexible( flex: 1, child: new RaisedButton( onPressed: () { print('點(diǎn)擊黃色按鈕事件'); }, color: const Color(0xfff1c232), child: new Text('黃色按鈕'), ), ), new RaisedButton( onPressed: () { print('點(diǎn)擊粉色按鈕事件'); }, color: const Color(0xffea9999), child: new Text('粉色按鈕'), ), ] ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new LayoutDemo(), ), ); } 

2.垂直布局
Column控件即垂直布局控件，能夠?qū)⒆涌丶怪迸帕?/p>

import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('垂直方向布局'), ), body: new Column( children: <Widget>[ new RaisedButton( onPressed: () { print('點(diǎn)擊紅色按鈕事件'); }, color: const Color(0xffcc0000), child: new Text('紅色按鈕'), ), new Flexible( flex: 1, child: new RaisedButton( onPressed: () { print('點(diǎn)擊黃色按鈕事件'); }, color: const Color(0xfff1c232), child: new Text('黃色按鈕'), ), ), new RaisedButton( onPressed: () { print('點(diǎn)擊粉色按鈕事件'); }, color: const Color(0xffea9999), child: new Text('粉色按鈕'), ), ] ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new LayoutDemo(), ), ); } 

3.Stack即層疊布局控件，能夠?qū)⒆涌丶盈B排列
Stack控件的每一個(gè)子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根據(jù)alignment定位（默認(rèn)為左上角）。然后根據(jù)定位的子控件的top、right、bottom和left屬性將它們放置在Stack控件上。

import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('層疊定位布局'), ), body:new Center( child: new Stack(children: <Widget>[new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),new Positioned(left: 35.0,right: 35.0,top: 45.0,child: new Text('Whatever is worth doing is worth doing well. ???.???',style: new TextStyle(fontSize: 20.0,fontFamily: 'serif',),),),]), ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new LayoutDemo(), ), ); } 

4.Container控件即容器，是一個(gè)常用的控件，基礎(chǔ)容器的實(shí)例

import 'package:flutter/material.dart'; class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Center( child: new Container( width: 128.0, height: 128.0, decoration: new BoxDecoration( color: Colors.lightBlueAccent[100], ), ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ContainerDemo(), ), ); } 

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.webpost.com.cn/17749.html