Flutter開發實戰 高仿微信（2）發現頁
- 初級基礎系列
Flutter開發實戰初級（1）ListView詳解html
Flutter開發實戰初級（2）佈局詳解android
- 項目實戰系列
Flutter開發實戰 高仿微信（2）發現頁
1.項目代碼
1.1 微信發現頁面簡述
- 在上一篇《flutter開發微信之一》中講解了項目框架的簡單搭建，整個APP分爲四個tabbar：微信，通信錄，發現，我。其中發現是最簡單一個頁面，先從最容易的頁面入手，實現發現頁面主頁搭建。
1.2 APP框架優化
1.2.1 配置APP Logo和啓動圖片
- IOS 啓動圖片配置
- Android啓動圖片配置
1.2.2 配置資源圖片
-
flutter 項目資源在pubspec.yaml中配置 json
-
在代碼中使用圖片資源的方式：swift
-
不一樣分辨率的圖片使用 跟Android的多圖片適配相同，將不一樣分辨率下的圖片放到對應的目錄便可，以下： 數組
new Image.asset("assets/images/a.png");
複製代碼
- flutter 在項目中加載資源的兩種方式：
- 經過rootBundle對象來加載（每一個Flutter應用都有一個rootBundle對象，能夠訪問主asset bundle) . 若是你所在的業務場景下，拿不到context(不在widget中)，那就使用這個吧，不然使用下面的方式。
import 'package:flutter/services.dart';
Widget _createBody() {
return new FutureBuilder(
future: rootBundle.loadString('assets/a.json'),
builder: (context,snapshot){
if(snapshot.hasData) {
return new Text(snapshot.data.toString());
}
},
);
複製代碼
- 經過DefaultAssetBundle 來獲取當前BuildContext 的 AssetBundle，推薦使用。比方法一要靈活。能夠本身制定。
import 'package:flutter/services.dart';
Widget _createBody() {
return new FutureBuilder(
future: DefaultAssetBundle.of(context).loadString('assets/a.json'),
builder: (context,snapshot){
if(snapshot.hasData) {
return new Text(snapshot.data.toString());
}
},
);
複製代碼
1.2.3 配置其餘資源
1.2.3.1 String 資源配置
新建一個.dart文件，好比uidata.dart:微信
import 'package:flutter/material.dart';
class UIData {
//routes 頁面路徑
static const String homeRoute = "/home";
static const String profileOneRoute = "/View Profile";
static const String profileTwoRoute = "/Profile 2";
//strings
static const String appName = "Flutter UIKit";
//fonts 字體相關
static const String quickFont = "Quicksand";
static const String ralewayFont = "Raleway";
static const String quickBoldFont = "Quicksand_Bold.otf";
static const String quickNormalFont = "Quicksand_Book.otf";
static const String quickLightFont = "Quicksand_Light.otf";
//images
static const String imageDir = "assets/images";
static const String pkImage = "$imageDir/pk.jpg";
//login 好比登陸頁面用到的文本
static const String enter_code_label = "Phone Number";
static const String enter_code_hint = "10 Digit Phone Number";
//gneric 通用的文本
static const String error = "Error";
static const String success = "Success";
static const MaterialColor ui_kit_color = Colors.grey;
//colors
static List<Color> kitGradients = [
// new Color.fromRGBO(103, 218, 255, 1.0),
// new Color.fromRGBO(3, 169, 244, 1.0),
// new Color.fromRGBO(0, 122, 193, 1.0),
Colors.blueGrey.shade800,
Colors.black87,
];
static List<Color> kitGradients2 = [
Colors.cyan.shade600,
Colors.blue.shade900
];
//randomcolor
static final Random _random = new Random();
/// Returns a random color.
static Color next() {
return new Color(0xFF000000 + _random.nextInt(0x00FFFFFF));
}
}
複製代碼
1.2.3.2 國際化
詳情參考：國際化官方教程 app
1.2.4 添加依賴
在pubspec.yaml 中添加依賴 注意，只有在添加平臺所需相關依賴時，才須要去Android 工程中的gradle中添加依賴。框架
1.2.5 新建四個主頁對應四個tabbar
1.3 發現頁面佈局
2.知識點
2.1 flutter佈局
2.1.1 Row 水平佈局
- 簡介
flex水平佈局控件，可以將子控件水平排列，是基於Web的flexbox的佈局模式設計的。 Row子控件有靈活與不靈活的兩種，Row首先列出不靈活的子控件，減去它們的總寬度，計算還有多少可用的空間。而後Row按照Flexible.flex屬性肯定的比例在可用空間中列出靈活的子控件。要控制靈活子控件，須要使用Expanded控件。 注意該控件不支持滑動，若是子控件超過剩餘空間，會報錯，若是想支持水平滑動，考慮使用ListView。 若是隻有一個子控件，可使用 Align or Center控件定義該子控件位置。
- 實例
1 new Row(
2 children: <Widget>[
3 new Expanded(
4 child: new Text('Deliver features faster', textAlign: TextAlign.center),
5 ),
6 new Expanded(
7 child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
8 ),
9 new Expanded(
10 child: new FittedBox(
11 fit: BoxFit.contain, // otherwise the logo will be tiny
12 child: const FlutterLogo(),
13 ),
14 ),
15 ],
16 )
複製代碼
- 用法
2.1.2 Column 垂直佈局
- 簡介 flex垂直佈局控件，可以將子控件垂直排列。 用法與Row控件同樣。
- 實例
new Column(
2 crossAxisAlignment: CrossAxisAlignment.start,
3 mainAxisSize: MainAxisSize.min,
4 children: <Widget>[
5 new Text('We move under cover and we move as one'),
6 new Text('Through the night, we have one shot to live another day'),
7 new Text('We cannot let a stray gunshot give us away'),
8 new Text('We will fight up close, seize the moment and stay in it'),
9 new Text('It’s either that or meet the business end of a bayonet'),
10 new Text('The code word is ‘Rochambeau,’ dig me?'),
11 new Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
12 ],
13 )
複製代碼
- 用法
2.1.3 Stack 層佈局
-
簡介
-
實例
-
用法
2.1.4 主軸
-
簡介
-
實例
-
用法
2.1.5
-
簡介
-
實例
-
用法
2.2 flutter基本組件
Flutter控件自己一般由許多小型、單用途的控件組成，結合起來產生強大的效果，例如，Container是一種經常使用的控件，由負責佈局、繪畫、定位和大小調整的幾個控件組成，具體來講，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件組成，而不是將Container子類化來產生自定義效果，您能夠用這種新穎的方式組合這些以及其餘簡單的控件。
類的層次結構是扁平的，以最大化可能的組合數量。
在寫應用程序時，常常會使用StatelessWidget和StatefulWidget編寫新控件，二者的差異在於你是否要管理控件的狀態。一個控件的主要任務是實現build函數，定義控件中其餘較低層次的控件。build函數將依次構建這些控件，直到底層渲染對象。
- Flutter控件和Android，IOS原生控件比較
| Flutter控件 | Android控件 | IOS控件 |
|---|---|---|
| AppBar | ActionBar/ToolBar | UINavgationBar |
| ListView | ListView/RecyclerView | UITableView |
| ListView | ListView/RecyclerView | UITableView |
| Text | TextView | UILabel |
| Center | ViewGroup | --- |
| Container | RelativeLayout | -- |
| FloatingActionButton | FloatingActionButton(design庫裏面的) | --- |
| BottomNavigationBar | BottomNavigation(design庫裏面的) | --- |
| RaisedButton/Button | Button | -- |
| Column | LinearLayout的android:orientation="vertical" | -- |
| Row | android:orientation="horizontal" | -- |
| DecorationImage | ImageView | -- |
| Image | ImageView | UIImageView |
| Stack | FrameLayout/RelativeLayout | -- |
| Algin | alginParentXXX屬性 | -- |
| resizeToAvoidBottomPadding | android:windowSoftInputMode=」 | adjustResize屬性 |
| SingleChildScrollView | ScrollView | UIScrollView |
| CustomScrollerView | Recyclerview | -- |
2.2.1 Container
- 簡介
容器，一個經常使用的控件，由基本的繪製、位置和大小控件組成。負責建立矩形的可視元素，能夠用BoxDecoration來設計樣式，好比背景、邊框和陰影，Container也有邊距、填充和大小限制，另外，還能夠在三維空間利用矩陣進行變換。 沒有子控件的容器儘量大，除非傳入的大小約束是無限的，在這種狀況下，它們儘量小。有子控件的容器將本身的尺寸給他們的孩子。咱們能夠經過width、height和 constraints屬性控制size。
- 實例
new Container(
constraints: new BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.teal.shade700,
alignment: Alignment.center,
child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
foregroundDecoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage('https://www.example.com/images/frame.png'),
centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
transform: new Matrix4.rotationZ(0.1),
)
複製代碼
- 用法
2.2.2 Image
- 簡介
顯示圖像的控件，Image控件有多種構造函數： new Image，用於從ImageProvider獲取圖像。 new Image.asset，用於使用key從AssetBundle獲取圖像。 new Image.network，用於從URL地址獲取圖像。 new Image.file，用於從File獲取圖像。
爲了自動執行像素密度感知資源分辨率，使用AssetImage指定圖像，須要確保在控件樹中的圖片控件上方存在MaterialApp、WidgetsApp和MediaQuery控件。
不一樣的手機有不一樣的像素比率，這時就須要根據手機的像素比率來加載不一樣圖片，作法很簡單，只須要在圖片同級目錄下建立2.0x/…和3.0x/…的目錄就能夠了。
咱們在pubspec.yaml這個文件裏指定本地圖片路徑
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
複製代碼
-
實例
-
用法
2.2.3 Text
-
簡介
-
實例 下面的實例有7個不一樣樣式的文本控件：
1 import 'package:flutter/material.dart';
2 class TextDemo extends StatelessWidget {
3 @override
4 Widget build(BuildContext context) {
5 return new Scaffold(
6 appBar: new AppBar(
7 title: new Text('文本控件'),
8 ),
9 body: new Column(
10 children: <Widget>[
11 new Text(
12 '紅色+黑色刪除線+25號',
13 style: new TextStyle(
14 color: const Color(0xffff0000),
15 decoration: TextDecoration.lineThrough,
16 decorationColor: const Color(0xff000000),
17 fontSize: 25.0,
18 ),
19 ),
20 new Text(
21 '橙色+下劃線+24號',
22 style: new TextStyle(
23 color: const Color(0xffff9900),
24 decoration: TextDecoration.underline,
25 fontSize: 24.0,
26 ),
27 ),
28 new Text(
29 '虛線上劃線+23號+傾斜',
30 style: new TextStyle(
31 decoration: TextDecoration.overline,
32 decorationStyle: TextDecorationStyle.dashed,
33 fontSize: 23.0,
34 fontStyle: FontStyle.italic,
35 ),
36 ),
37 new Text(
38 'serif字體+24號',
39 style: new TextStyle(
40 fontFamily: 'serif',
41 fontSize: 26.0,
42 ),
43 ),
44 new Text(
45 'monospace字體+24號+加粗',
46 style: new TextStyle(
47 fontFamily: 'monospace',
48 fontSize: 24.0,
49 fontWeight: FontWeight.bold,
50 ),
51 ),
52 new Text(
53 '天藍色+25號+2行跨度',
54 style: new TextStyle(
55 color: const Color(0xff4a86e8),
56 fontSize: 25.0,
57 height: 2.0,
58 ),
59 ),
60 new Text(
61 '24號+2個字母間隔',
62 style: new TextStyle(
63 fontSize: 24.0,
64 letterSpacing: 2.0,
65 ),
66 ),
67 ]
68 ),
69 );
70 }
71 }
72 void main() {
73 runApp(
74 new MaterialApp(
75 title: 'Flutter教程',
76 home: new TextDemo(),
77 ),
78 );
79 }
複製代碼
運行效果：
2.2.4 Icon
- 簡介
圖標控件，按照IconData中所描述的規則繪製，如Material中預約義的IconDatas。 該控件不可交互，要實現可交互的圖標，能夠考慮使用Material中的 IconButton。 該控件必須在 Directionality控件裏使用，一般這是由WidgetsApp或 MaterialApp自動引入的。詳見：docs.flutter.io/flutter/wid…
-
實例
-
用法
2.2.5 RaisedButton
- 簡介
Material Design 風格的浮動按鈕，以方形紙片樣式懸停在界面上，點擊後會產生墨水擴散效果。 避免在dialog和card控件裏使用，通常彈出式的控件建議使用扁平化按鈕，減小布局層次疊加。詳見：docs.flutter.io/flutter/mat…
-
實例
-
用法 使用時，要實現onPressed回調方法，不然按鈕處於禁用狀態，默認顯示disabledColor樣式的扁平化按鈕，而且此時更改按鈕的顏色不會生效。 注意該控件的父控件必須是Material控件。 若是你只須要點擊後產生墨水擴散效果，但不想使用按鈕，請考慮直接使用InkWell控件。 若有必要，該按鈕將拉伸以適應子控件大小。
2.2.6 Scaffold
- 簡介
Scaffold 實現了基本的Material Design佈局結構。也就是說， MaterialApp 的 child 是 Scaffold Widget。 在Material設計中定義的單個界面上的各類佈局元素，在 Scaffold 中都有支持，好比 左邊欄（Drawers）、snack bars、以及 bottom sheets。
Scaffold 有下面幾個主要屬性：
-
appBar：顯示在界面頂部的一個 AppBar，也就是 Android 中的 ActionBar 、Toolbar
-
body：當前界面所顯示的主要內容 Widget
-
floatingActionButton：Material設計中所定義的 FAB，界面的主要功能按鈕
-
persistentFooterButtons：固定在下方顯示的按鈕，好比對話框下方的肯定、取消按鈕
-
drawer：側邊欄控件
-
backgroundColor： 內容的背景顏色，默認使用的是 ThemeData.scaffoldBackgroundColor 的值
-
bottomNavigationBar： 顯示在頁面底部的導航欄
-
resizeToAvoidBottomPadding：相似於 Android 中的 android:windowSoftInputMode=」adjustResize」，控制界面內容 body 是否從新佈局來避免底部被覆蓋了，好比當鍵盤顯示的時候，從新佈局避免被鍵盤蓋住內容。默認值爲 true。
顯示 snackbar 或者 bottom sheet 的時候，須要使用當前的 BuildContext 參數調用 Scaffold.of 函數來獲取 ScaffoldState 對象，而後使用 ScaffoldState.showSnackBar 和 ScaffoldState.showBottomSheet 函數來顯示。
要特別注意 Scaffold.of 的參數 BuildContext， 若是包含該 BuildContext 的 Widget 是 Scaffold 的父 Widget，則 Scaffold.of 是沒法查找到對應的 ScaffoldState 對象的，Scaffold.of 返回的是父對象中最近的 Scaffold 中的 ScaffoldState 對象。 好比，若是在 Scaffold 的 build 函數中，使用 build 的 BuildContext 參數是能夠的：
1 @override
2 Widget build(BuildContext context) {
3 return new RaisedButton(
4 child: new Text('SHOW A SNACKBAR'),
5 onPressed: () {
6 Scaffold.of(context).showSnackBar(new SnackBar(
7 content: new Text('Hello!'),
8 ));
9 },
10 );
11 }
複製代碼
- 實例 若是 build 函數返回一個 Scaffold 對象，則因爲 Scaffold 對象是這個 Widget 的子對象，因此使用這個 build 的 BuildContext 參數是不能查找到 ScaffoldState 對象的，這個時候，經過在 Scaffold 中使用一個 Builder 來提供一個新的 BuildConext ：
@override
2 Widget build(BuildContext context) {
3 return new Scaffold(
4 appBar: new AppBar(
5 title: new Text('Demo')
6 ),
7 body: new Builder(
8 // Create an inner BuildContext so that the onPressed methods
9 // can refer to the Scaffold with Scaffold.of().
10 builder: (BuildContext context) {
11 return new Center(
12 child: new RaisedButton(
13 child: new Text('SHOW A SNACKBAR'),
14 onPressed: () {
15 Scaffold.of(context).showSnackBar(new SnackBar(
16 content: new Text('Hello!'),
17 ));
18 },
19 ),
20 );
21 },
22 ),
23 );
24 }
複製代碼
另外還能夠把 build 函數中的 Widget 分別建立，分別引入新的 BuildContext 來獲取 Scaffold。
- 用法
2.2.7 Appbar
- 簡介
AppBar 和 SliverAppBar 是Material Design中的 App Bar，也就是 Android 中的 Toolbar，關於 Toolbar 的設計指南請參考Material Design中 Toolbar 的內容。 AppBar 和 SliverAppBar 都是繼承StatefulWidget 類，都表明 Toobar，兩者的區別在於 AppBar 位置的固定的應用最上面的；而 SliverAppBar 是能夠跟隨內容滾動的。
他們的主要屬性以下：
-
leading：在標題前面顯示的一個控件，在首頁一般顯示應用的 logo；在其餘界面一般顯示爲返回按鈕
-
title： Toolbar 中主要內容，一般顯示爲當前界面的標題文字
-
actions：一個 Widget 列表，表明 Toolbar 中所顯示的菜單，對於經常使用的菜單，一般使用 IconButton 來表示；對於不經常使用的菜單一般使用 PopupMenuButton 來顯示爲三個點，點擊後彈出二級菜單
-
bottom：一個 AppBarBottomWidget 對象，一般是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄
-
elevation：紙墨設計中控件的 z 座標順序，默認值爲 4，對於可滾動的 SliverAppBar，當 SliverAppBar 和內容同級的時候，該值爲 0， 當內容滾動 SliverAppBar 變爲 Toolbar 的時候，修改 elevation 的值
-
flexibleSpace：一個顯示在 AppBar 下方的控件，高度和 AppBar 高度同樣，能夠實現一些特殊的效果，該屬性一般在 SliverAppBar 中使用
-
backgroundColor：APP bar 的顏色，默認值爲 ThemeData.primaryColor。改值一般和下面的三個屬性一塊兒使用
-
brightness：App bar 的亮度，有白色和黑色兩種主題，默認值爲 ThemeData.primaryColorBrightness
-
iconTheme：App bar 上圖標的顏色、透明度、和尺寸信息。默認值爲 ThemeData.primaryIconTheme
-
textTheme： App bar 上的文字樣式。默認值爲 ThemeData.primaryTextTheme
-
centerTitle： 標題是否居中顯示，默認值根據不一樣的操做系統，顯示方式不同
- 實例
import 'package:flutter/material.dart';
2
3 class AppBarBottomSample extends StatefulWidget {
4 @override
5 _AppBarBottomSampleState createState() => new _AppBarBottomSampleState();
6 }
7
8 class _AppBarBottomSampleState extends State<AppBarBottomSample> with SingleTickerProviderStateMixin {
9 TabController _tabController;
10
11 @override
12 void initState() {
13 super.initState();
14 _tabController = new TabController(vsync: this, length: choices.length);
15 }
16
17 @override
18 void dispose() {
19 _tabController.dispose();
20 super.dispose();
21 }
22
23 void _nextPage(int delta) {
24 final int newIndex = _tabController.index + delta;
25 if (newIndex < 0 || newIndex >= _tabController.length)
26 return;
27 _tabController.animateTo(newIndex);
28 }
29
30 @override
31 Widget build(BuildContext context) {
32 return new MaterialApp(
33 home: new Scaffold(
34 appBar: new AppBar(
35 title: const Text('AppBar Bottom Widget'),
36 leading: new IconButton(
37 tooltip: 'Previous choice',
38 icon: const Icon(Icons.arrow_back),
39 onPressed: () { _nextPage(-1); },
40 ),
41 actions: <Widget>[
42 new IconButton(
43 icon: const Icon(Icons.arrow_forward),
44 tooltip: 'Next choice',
45 onPressed: () { _nextPage(1); },
46 ),
47 ],
48 bottom: new PreferredSize(
49 preferredSize: const Size.fromHeight(48.0),
50 child: new Theme(
51 data: Theme.of(context).copyWith(accentColor: Colors.white),
52 child: new Container(
53 height: 48.0,
54 alignment: Alignment.center,
55 child: new TabPageSelector(controller: _tabController),
56 ),
57 ),
58 ),
59 ),
60 body: new TabBarView(
61 controller: _tabController,
62 children: choices.map((Choice choice) {
63 return new Padding(
64 padding: const EdgeInsets.all(16.0),
65 child: new ChoiceCard(choice: choice),
66 );
67 }).toList(),
68 ),
69 ),
70 );
71 }
72 }
73
74 class Choice {
75 const Choice({ this.title, this.icon });
76 final String title;
77 final IconData icon;
78 }
79
80 const List<Choice> choices = const <Choice>[
81 const Choice(title: 'CAR', icon: Icons.directions_car),
82 const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
83 const Choice(title: 'BOAT', icon: Icons.directions_boat),
84 const Choice(title: 'BUS', icon: Icons.directions_bus),
85 const Choice(title: 'TRAIN', icon: Icons.directions_railway),
86 const Choice(title: 'WALK', icon: Icons.directions_walk),
87 ];
88
89 class ChoiceCard extends StatelessWidget {
90 const ChoiceCard({ Key key, this.choice }) : super(key: key);
91
92 final Choice choice;
93
94 @override
95 Widget build(BuildContext context) {
96 final TextStyle textStyle = Theme.of(context).textTheme.display1;
97 return new Card(
98 color: Colors.white,
99 child: new Center(
100 child: new Column(
101 mainAxisSize: MainAxisSize.min,
102 crossAxisAlignment: CrossAxisAlignment.center,
103 children: <Widget>[
104 new Icon(choice.icon, size: 128.0, color: textStyle.color),
105 new Text(choice.title, style: textStyle),
106 ],
107 ),
108 ),
109 );
110 }
111 }
112
113 void main() {
114 runApp(new AppBarBottomSample());
115 }
複製代碼
運行效果:
2.2.8 FlutterLogo
- 簡介 定義flutter應用的logo，該控件受IconTheme約束。
- 實例
import 'package:flutter/material.dart';
2
3 void main() {
4 runApp(new FadeAppTest());
5 }
6
7 class FadeAppTest extends StatelessWidget {
8 // This widget is the root of your application.
9 @override
10 Widget build(BuildContext context) {
11 return new MaterialApp(
12 title: 'Fade Demo',
13 theme: new ThemeData(
14 primarySwatch: Colors.blue,
15 ),
16 home: new MyFadeTest(title: 'Fade Demo'),
17 );
18 }
19 }
20
21 class MyFadeTest extends StatefulWidget {
22 MyFadeTest({Key key, this.title}) : super(key: key);
23 final String title;
24 @override
25 _MyFadeTest createState() => new _MyFadeTest();
26 }
27
28 class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
29 AnimationController controller;
30 CurvedAnimation curve;
31
32 @override
33 void initState() {
34 controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
35 curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
36 }
37
38 @override
39 Widget build(BuildContext context) {
40 return new Scaffold(
41 appBar: new AppBar(
42 title: new Text(widget.title),
43 ),
44 body: new Center(
45 child: new Container(
46 child: new FadeTransition(
47 opacity: curve,
48 child: new FlutterLogo(
49 size: 100.0,
50 )))),
51 floatingActionButton: new FloatingActionButton(
52 tooltip: 'Fade',
53 child: new Icon(Icons.brush),
54 onPressed: () {
55 controller.forward();
56 },
57 ),
58 );
59 }
60 }
複製代碼
- 用法
2.2.9 Placeholder
- 簡介
佔位控件，該控件繪製一個框，表示未來會在該位置添加其餘控件。 這個控件在開發過程當中頗有用，可提示該處接口還沒完成。 默認狀況下，控件的大小自適應其容器。若是該控件處於無界空間，它將根據給定的fallbackWidth和fallbackHeight自行調整大小。 詳見：docs.flutter.io/flutter/wid…
-
實例
-
用法
2.2.10
-
簡介
-
實例
-
用法
3.深刻研究
3.1 flutter項目結構分析
- 純Flutter項目結構
- projectName -android //android的工程文件 -build //項目的構建輸出文件 -ios //項目的ios工程文件 -lib //項目中的dart文件 -src //包含其餘的源文件 -main.dart //自動生成的項目入口文件 -test //測試相關的文件 -assets -images//建議存放圖片 -2.0x -3.0x xxxxx //圖片能夠直接放到images -fonts//建議存放字體 -pubspec.yaml //項目依賴配置文件
- 混編Flutter項目
如上圖，下面咱們就按個來分析，看一下一個flutter混編工程都有那些不一樣之處相對咱們傳統的android工程。首先第一個.gradle文件沒有區別，裏面就是咱們當前工程使用的gradle的版本，接下來一個，就是咱們的android文件夾，用來存放咱們的android工程，再下來是咱們的asset文件夾，用來存放flutter工程的資源，包括圖片，字體，視頻等任何資源文件，http_plugin你們先不看，由於他是一個插件工程，咱們最後看，再下來是一個ios文件夾，裏面固然是存放咱們的ios工程的全部內容，再下來的lib文件夾，則是存放flutter代碼的默認目錄(能夠修更名字,後面詳細講解)，最後一個最重要的文件是pubspec.yaml文件，這個文件用來配置flutter工程所須要的依賴等，到這裏其實咱們就從總體上知道了，flutter工程有那些特別的地方，固然還只是停留在一個總體，下面咱們以一張圖來進行對比，從總體上咱們來看一下與傳統android工程的區別。
3.2 flutter項目pubspec.yaml文件
pubspecyaml文件用於配置flutter的資源依賴、庫依賴
- yaml語法 大小寫敏感 用冒號和縮進表明層次關係 只能用空格，不能用tab鍵，對空格多少沒要求，同級對齊便可 可表示三種數據類型，常量值，對象，數組
#即表示url屬性值：
url: http://www.wolfcode.cn
#即表示server.host屬性的值；
server:
host: http://www.wolfcode.cn
#數組，即表示server爲[a,b,c]
server:
- 120.168.117.21
- 120.168.117.22
- 120.168.117.23
#常量
pi: 3.14 #定義一個數值3.14
hasChild: true #定義一個boolean值
name: '你好YAML' #定義一個字符串
複製代碼
- 在dependencies:下添加庫依賴
dependencies：
flutter：
sdk：flutter
#^表示適配和當前大版本一致的版本，即2.x.x均可，~表示適配和當前小版本一致的版本，即2.1.x均可
dio：^2.1.0
複製代碼
^表示適配和當前大版本一致的版本，即2.x.x均可，~表示適配和當前小版本一致的版本，即2.1.x均可
- 在flutter：下面添加添加資源依賴
flutter：
user-material-design：true
assets:
- images/lake.jpg
- images/light.jpg
複製代碼
冒號後面必定要有空格，表示數組元素的-符號後面也要有空格，不然語法不經過。 images/lake.jpg是圖片的路徑 即在project下創建一個images文件夾 再把lake.jpg放進去。
3.3 flutter項目圖片資源配置
Flutter應用程序能夠包含代碼和 assets（有時稱爲資源）。asset是打包到程序安裝包中的，可在運行時訪問。常見類型的asset包括靜態數據（例如JSON文件），配置文件，圖標和圖片（JPEG，WebP，GIF，動畫WebP / GIF，PNG，BMP和WBMP） 資源須要在 pubspec.yaml中配置，配置方法:
flutter:
assets:
- assets/my_icon.png
- assets/background.png
複製代碼
- Asset 變體(variant)
- 變體就是指在構建時，根據不一樣的場景，選擇適應該場景的資源。能夠類比Android多圖片資源的適配：自動選擇加載xxh或者xh下的圖片。
- 在根據pubspec.yaml構建資源時，會在相鄰目錄中找到相同名稱的任何文件，這些文件會一塊兒打入包中。
應用程序中有以下文件：
assets/image/a.png
assets/image/2x/a.png
assets/image/3x/a.png
pubspec.yaml 中配置：
flutter:
assets:
- assets/calendar.png
那麼，這三種a.png 都會打入asset bundle中。後面2個被認爲是變體。
複製代碼
- 加載資源
- 1. Flutter開發實戰 高仿微信（1）首頁
- 2. Flutter 實現高仿開眼 APP 的頁面開發 01
- 3. Flutter 實現高仿開眼 APP 的頁面開發 02
- 4. uni-app實戰仿微信app開發
- 5. 使用Flutter開發一個仿微信飛機大戰遊戲
- 6. 高仿Vue餓了麼 實戰開發
- 7. Flutter開發實戰初級（2）頁面佈局詳解
- 8. flutter實戰項目，教你使用flutter打造仿微信app頁面！
- 9. 【微信開發】微信網頁掃碼登陸的實現
- 10. [微信開發] 微信網頁受權Java實現
- 更多相關文章...
- • 使用Redis和SSM（Spring+Spring MVC+MyBatis）搭建搶紅包開發環境和超發現象完整實例 - 紅包項目實戰
- • Rust 併發編程 - RUST 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。