亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

升級FlutterSDK

終端輸入flutter upgrade或者刪除sdk重新下載

material.dart 基礎樣式

StatelessWidget與StatefulWidget：后者用于動態的組件比如進度條，前者用于靜態的，后者比前者使用的偏多

R：點擊后熱加載，直接查看預覽效果

P：在虛擬機中顯示網格，工作中經常使用

O：切換Android和IOS的預覽模式

Q：退出調試預覽模式

flutter 120fps超高性能

fps：每秒傳輸幀數，每秒畫面數

第三方組件：https://github.com/Solido/awesome-flutter法國人總結的好用的組件。

開始使用flutter的大廠：Alibaba Tencent JD

跨平臺：Linux、android、ios、fuchsia

原生用戶界面：它是原生的，讓我們體驗更好，性能更好

開源免費：完全開源，可以進行商用

cordova：混合式開發框架（Hybrid app）

RN（React Native）：原生app，以view為基礎嵌入

Flutter：在渲染技術上，選擇自己實現（GDI），有更好的可控性

跨平臺：Linux、android、ios、fuchsia

原生用戶界面：它時原生的，讓我們體驗更好，性能更好

開源免費：完全開源，可以進行商用

import?'package:flutter/material.dart';

void?main()?=>

????runApp(MyApp(items:?new?List<String>.generate(1000,?(i)?=>?'Items?$i')));

class?MyApp?extends?StatelessWidget?{

??final?List<String>?items;

??MyApp({Key?key,?@required?this.items})?:?super(key:?key);

??@override

??Widget?build(BuildContext?context)?{

????return?MaterialApp(

??????title:?'listView',

??????home:?Scaffold(

????????appBar:?AppBar(

??????????title:?Text('flutter'),

????????),

????????body:?new?ListView.builder(

????????????itemCount:?items.length,

????????????itemBuilder:?(context,?index)?{

??????????????return?new?ListTile(title:?Text('${items[index]}'));

????????????}),

??????),

????);

??}

}

class?MyList?extends?StatelessWidget?{

??@override

??Widget?build(BuildContext?context)?{

????//?TODO:?implement?build

????return?ListView(scrollDirection:?Axis.horizontal,?children:?<Widget>[

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

????]);

??}

}

class?MyDyList?extends?State?{

??@override

??Widget?build(BuildContext?context)?{

????//?TODO:?implement?build

????return?ListView(scrollDirection:?Axis.horizontal,?children:?<Widget>[

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

??????new?Container(

????????width:?380.0,

????????child:?new?Image.network(

????????????'https://img1.sycdn.imooc.com//szimg/5dde5881088dd8da06000338-360-202.jpg'),

??????),

????]);

??}

}

import?'package:flutter/material.dart';

void?main()?=>?runApp(MyApp());

class?MyApp?extends?StatelessWidget?{

??@override

??Widget?build(BuildContext?context)?{

????return?MaterialApp(

??????title:?'hello',

??????home:?Scaffold(

????????appBar:?AppBar(

??????????title:?Text('flutter'),

????????),

????????body:?Center(

??????????child:?new?Container(

????????????//???child:?new?Text(

????????????//?????'測試容器',

????????????//?????style:?TextStyle(fontSize:?25.0),

????????????//???),

????????????//???alignment:?Alignment.topLeft,

????????????//???width:?500.0,

????????????//???height:?300.0,

????????????//???//color:?Colors.lightBlue,

????????????//???padding:?const?EdgeInsets.all(30.0),

????????????//???margin:?const?EdgeInsets.all(30.0),

????????????//???decoration:?new?BoxDecoration(

????????????//???????//設置顏色漸變的效果

????????????//???????gradient:?const?LinearGradient(

????????????//???????????colors:?[Colors.lightBlue,?Colors.purple,?Colors.orange])),

????????????//?),

????????????child:?new?Image.network(

??????????????'http://q2clet0zz.bkt.clouddn.com/flutter/20191223105622.png',

??????????????scale:?2.0,

??????????????fit:?BoxFit.cover,

????????????),

????????????width:?500.0,

????????????height:?400.0,

????????????color:?Colors.lightBlue,

??????????),

????????),

??????),

????);

??}

}

動態數據展示

padding 內邊距屬性

style屬性記錄。

常用屬性記錄

快捷鍵截圖看看

flutter 120fps超高性能

fps：每秒傳輸幀數，每秒畫面數

第三方組件：https://github.com/Solido/awesome-flutter法國人總結的好用的組件。

開始使用flutter的大廠：Alibaba Tencent JD

cordova：混合式開發框架（Hybrid app）

RN（React Native）：原生app，以view為基礎嵌入

Flutter：在渲染技術上，選擇自己實現（GDI），有更好的可控性

第三方組件地址：https://github.com/Solido/awesome-flutter