這幾天一直在學(xué)習(xí)， 今天有時(shí)間整理一下學(xué)習(xí)的內(nèi)容用于記錄與分享著隆，詳細(xì)的控件使用描述有興趣的可以去官網(wǎng)上看狡相，我這邊自己寫了一個(gè)很簡單的小demo，包含了一些基礎(chǔ)的知識(shí)褪迟。
surprised.png
記錄的知識(shí)點(diǎn)：
· 1 底部菜單導(dǎo)航
· 2 頁面的跳轉(zhuǎn)
· 3 ListView
· 4 吐司（這個(gè)是內(nèi)部實(shí)現(xiàn)引用的冗恨，具體flutter自帶的框架，暫時(shí)不清楚）
· 5 涉及到一些布局的書寫（屬性）
· 6 res資源的引用
· 7 涉及到的一些widget使用介紹味赃，或在注解或在代碼片段后掀抹。
項(xiàng)目效果圖：
home.png
一、頁面的跳轉(zhuǎn)
我自己寫了一個(gè)頁面就放了一個(gè)RaisedButton心俗，跳轉(zhuǎn)到首頁傲武。
transition.png
RaisedButton就是一個(gè)button，實(shí)現(xiàn)onPressed監(jiān)聽btn事件城榛。
Navigator這個(gè)是用來進(jìn)行跳轉(zhuǎn)頁面的揪利。
涉及到的一些需要介紹的控件我用都**來表示注解了， //看不清楚
import 'package:flutter/material.dart'; **基本多是這個(gè)包
import 'package:flutter_app/MainActivity.dart'; **我跳轉(zhuǎn)的首頁面
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(**MaterialApp個(gè)人理解為程序的渲染入口
title: 'Hello World',
theme: new ThemeData( **全局主題只是由應(yīng)用程序根MaterialApp創(chuàng)建的Theme來表示
primaryColor: Colors.lightBlue,
),
home: new RandomWords(),**調(diào)用方法體
);
}
}
class RandomWordsState extends State<RandomWords>{
**Scaffold 是 Material library 中提供的一個(gè)widget,
它提供了默認(rèn)的導(dǎo)航欄狠持、標(biāo)題和包含主屏幕widget樹的body屬性土童。widget樹可以很復(fù)雜。
** Center這個(gè)空間居中
** RaisedButton = button
** Navigator頁面的跳轉(zhuǎn)工坊，差不多都是這個(gè)寫法献汗，固定
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new RaisedButton(
child: new Text('登錄'),
onPressed: (){
Navigator.push(context, new MaterialPageRoute(builder: (context)=>new MainActivity()));
}),
),
);
}
}
class RandomWords extends StatefulWidget {
@override
** =>單行函數(shù)或方法的簡寫
createState() => new RandomWordsState();
}
其中StatelessWidget它是表示所有的屬性都是最終的敢订，可以理解為屬性不可變。
StatefulWidget 我覺得可以理解為android中某一個(gè)自定義的方法（代碼書寫ui）罢吃，方法體的內(nèi)容是可變的楚午，當(dāng)然它也是一個(gè)widget。在flutter中書寫一個(gè)這樣的方法尿招，就需要按照上述代碼中的方式來書寫矾柜。
二、MainActivity頁面
- images文件的引用就谜。
頁面中包含了一些圖片資源怪蔑，記錄一下images的引用方式。
項(xiàng)目結(jié)構(gòu)圖.png
一開始Flutter是沒有images文件夾的丧荐，自己創(chuàng)建一個(gè)缆瓣，跟android ios保持同級(jí)。
在
pubspec.yaml文件中進(jìn)行images的關(guān)聯(lián)虹统，pubspec.yaml這個(gè)可以理解為build.gradle弓坞。
引用界面.png
在Flutter的節(jié)點(diǎn)下新增（引用全目錄 ，若單張全名稱包含后綴）：
assets:
- images/
添加完畢后在右上角有同步按鈕车荔，別忘了
image.png
package get 加載引入的包
package upgradle 升級(jí)包
flutter upgradle 整理升級(jí) 包括Dart SDK version等
flutter doctor 檢測需要安裝的東西
-
包的引用
當(dāng)初在看官方的時(shí)候渡冻，引用了一個(gè)english_words的包，項(xiàng)目中沒有用忧便，但是 這邊記錄一下引用包的方式族吻。
image.png
在 lib/main.dart 中 import 'package:english_words/english_words.dart';就可以了，需要注意的是珠增，在pubspec.yaml中添加了之后記得package get呼奢，在彈出的message窗口中Process finished with exit code 0 表示引用成功。
- 底部導(dǎo)航 BottomNavigationBarItem
在看代碼之前：
此處簡要一下代碼的書寫邏輯切平。
因?yàn)轫撁媸强勺兛烧{(diào)整的，所以我肯定需要書寫StatefulWidget辐董。
接著 初始了切換的圖片悴品，文字等資源
在BottomNavigationBarItem中主要是通過 下標(biāo) 切換圖片和文字的顯示，當(dāng)然也包含切換頁面简烘，切換頁面的書寫方式類似android中的fragment苔严，屬于獨(dú)立頁面，配合使用IndexedStack進(jìn)行切換頁面的顯示與隱藏孤澎。
具體的代碼含義届氢，我在注釋里進(jìn)行介紹。
import 'package:flutter/cupertino.dart'; **底部導(dǎo)航切換覆旭，需導(dǎo)入
import 'package:flutter/material.dart'; **上面注解介紹過
import 'package:flutter_app/page/homeinfo.dart';**fragment頁面
import 'package:flutter_app/page/myinfo.dart';**fragment頁面
void main() => runApp(new MainActivity());
class MainActivity extends StatelessWidget {
**這塊沒啥介紹的退子， 同上
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Hello World',
theme: new ThemeData(
primaryColor: Colors.blue,
),
home: new RandomWords(),
);
}
}
class RandomWordsState extends State<RandomWords> {
int _tabIndex = 0; ** 默認(rèn)當(dāng)前頁
// static const double IMAGE_ICON_WIDTH = 30.0; 標(biāo)題上的返回按鈕
// static const double ARROW_ICON_HEIGHT = 16.0; 標(biāo)題上的返回按鈕
final normalTextColor = new TextStyle(color: const Color(0xff969696)); **默認(rèn)的顏色
final selectTextColor = new TextStyle(color: const Color(0xff63ca6c)); **選擇的顏色
var tabImage; **切換的image
var _body; **IndexedStack的對(duì)象
var tabNameList = ['首頁', '地圖', '我的']; **底部導(dǎo)航名稱
var titleNameList = ['動(dòng)服務(wù)平臺(tái)', '地圖', '我的']; **標(biāo)題名稱
// var leftIcon;標(biāo)題上的返回按鈕
// RandomWordsState(){
// leftIcon = setImages("images/icon_left.png");
// }
**統(tǒng)一設(shè)置image屬性 岖妄，path為images的引用路徑
Image getImagePath(path) {
return new Image.asset(
path,
width: 20.0,
height: 20.0,
);
}
**切換圖片的初始化，包括切換頁面的body初始 寂祥， getImagePath為統(tǒng)一設(shè)置的images屬性荐虐。
void initData() {
if (tabImage == null) {
tabImage = [
[
getImagePath('images/activity_home_unchecked.png'),
getImagePath('images/activity_home_checked.png')
],
[
getImagePath('images/activity_map_unchecked.png'),
getImagePath('images/activity_map_checked.png')
],
[
getImagePath('images/activity_mine_unchecked.png'),
getImagePath('images/activity_mine_checked.png')
],
];
}
** children這個(gè)我個(gè)人理解它是一個(gè)組合控件，像是一個(gè)容器丸凭，可以包含很多不同的Ui福扬，然后拼湊到一起。
_body = new IndexedStack(
children: <Widget>[new HomeInfo(), new MyInfo(), new MyInfo()],
index: _tabIndex,
);
}
** 根據(jù)下標(biāo)返回 text的顏色值
TextStyle getTabTextStyle(int curIndex) {
if (curIndex == _tabIndex) {
return selectTextColor;
}
return normalTextColor;
}
** 調(diào)用getTabTextStyle 根據(jù)下標(biāo)設(shè)置text的顏色值
Text getTabTitle(int curIndex) {
return new Text(tabNameList[curIndex], style: getTabTextStyle(curIndex));
}
** 返回當(dāng)前下標(biāo)的images中的 所選圖片
Image getTabIcon(int curIndex) {
if (curIndex == _tabIndex) {
return tabImage[curIndex][1];
}
return tabImage[curIndex][0];
}
//設(shè)置iamge的位置
// Widget setImages(path) {
// return new Padding(
// padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
// child: new Image.asset(path,
// width: IMAGE_ICON_WIDTH, height: ARROW_ICON_HEIGHT));
// }
** AppBar標(biāo)題{title標(biāo)題文字 {Center標(biāo)題位置 child{標(biāo)題內(nèi)容} } }
** body切換的index頁面
** bottomNavigationBar底部導(dǎo)航{items導(dǎo)航數(shù)組{0,1,2}}
**onTap點(diǎn)擊(Index作為點(diǎn)擊返回值) {setState通知框架狀態(tài)已經(jīng)改變{_tabIndex 賦值當(dāng)前Index}}
@override
Widget build(BuildContext context) {
initData();
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Center(
child: new Text(titleNameList[_tabIndex],
style: new TextStyle(color: Colors.white)),
// child: new Row(
// children: <Widget>[
// leftIcon,
// new Text(tabNameList[_tabIndex],
// style: new TextStyle(color: Colors.white))
// ],
// ),
),
iconTheme: new IconThemeData(color: Colors.white)),
body: _body,
bottomNavigationBar: new CupertinoTabBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: getTabIcon(0),
title: getTabTitle(0)),
new BottomNavigationBarItem(
icon: getTabIcon(1),
title: getTabTitle(1)),
new BottomNavigationBarItem(
icon: getTabIcon(2),
title: getTabTitle(2)),
],
currentIndex: _tabIndex,
onTap: (index) {
setState(() {
_tabIndex = index;
});
},
),
),
);
}
}
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
底部切換基本就這些惜犀，你要是只是想測試一下底部切換效果也可以像我indexedStack那樣一樣铛碑，除了首頁，剩下的復(fù)用虽界。
-
HomeInfo.dart頁面
HomeInfo.png
考慮到頁面的布局汽烦，我分成了2個(gè)層級(jí)，網(wǎng)格顯示是一個(gè)層級(jí)浓恳，報(bào)表是另外的一個(gè)層級(jí)刹缝，可以說是ListView 的兩個(gè)item，只不過是不同的item布局颈将。當(dāng)然這只是我個(gè)人的想法梢夯，經(jīng)過思考后在StatefulWidget，我返回的就是一個(gè)ListView .
var title = ["項(xiàng)目信息", "農(nóng)村公路建設(shè)統(tǒng)計(jì)報(bào)表", "路網(wǎng)結(jié)構(gòu)改造統(tǒng)計(jì)報(bào)表"];
@override
Widget build(BuildContext context) {
var listview = new ListView.builder(
itemCount: title.length, itemBuilder: (context, i) => renderRow(i));
return listview;
}
ListView 初始化：
itemcount 網(wǎng)格是一個(gè)單獨(dú)的布局晴圾，另外的兩個(gè)可以復(fù)用布局颂砸。
renderRow是我自定義的方法
i 算是0 、1死姚、 2人乓，其中1、2布局復(fù)用都毒。
renderRow(int i) {
if (i == 0) { ** 此處i=0初始化網(wǎng)格的樣式色罚。
var projectInfo = new Container(
// color: const Color.fromRGBO(255, 255, 255, 255.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Center(
child: new Column(
children: <Widget>[
new Text(
title[0],
textAlign: TextAlign.left,
),
new Container(
color: const Color.fromRGBO(240, 248, 255, 200.0),
child: new Row(
children: <Widget>[
new Expanded(
flex: 1,
child: new Container(
margin: const EdgeInsets.only(
top: 10.0, right: 5.0, left: 10.0, bottom: 10.0),
decoration: new BoxDecoration(
border: new Border.all(
width: 1.0, color: Colors.black12),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0))),
height: 100.0,
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Image.asset(
"images/icon_way.png",
width: 50.0,
height: 50.0,
),
onPressed: () {
showShort("農(nóng)村公路建設(shè)類項(xiàng)目");
}),
new Center(child: new Text("農(nóng)村公路建設(shè)類項(xiàng)目"))
],
),
),
)),
new Expanded(
flex: 1,
child: new Container(
margin: const EdgeInsets.only(
top: 10.0, right: 10.0, left: 5.0, bottom: 10.0),
decoration: new BoxDecoration(
border: new Border.all(
width: 1.0, color: Colors.black12),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0))),
height: 100.0,
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Image.asset(
"images/icon_reform.png",
width: 50.0,
height: 50.0,
),
onPressed: () {
showShort("農(nóng)村公路建設(shè)類項(xiàng)目");
}),
new Center(child: new Text("危橋改造類項(xiàng)目"))
],
)),
))
],
),
),
new Container(
child: new Row(
children: <Widget>[
new Expanded(
flex: 1,
child: new Container(
margin: const EdgeInsets.only(
top: 0.0, right: 5.0, left: 10.0, bottom: 10.0),
decoration: new BoxDecoration(
border: new Border.all(
width: 1.0, color: Colors.black12),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0))),
height: 100.0,
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Image.asset(
"images/icon_security.png",
width: 50.0,
height: 50.0,
),
onPressed: () {
showShort("縣鄉(xiāng)安防工程類項(xiàng)目");
}),
new Center(child: new Text("縣鄉(xiāng)安防工程類項(xiàng)目"))
],
),
),
)),
new Expanded(
flex: 1,
child: new Container(
margin: const EdgeInsets.only(
top: 0.0, right: 10.0, left: 5.0, bottom: 10.0),
decoration: new BoxDecoration(
border: new Border.all(
width: 1.0, color: Colors.black12),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0))),
height: 100.0,
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Image.asset(
"images/icon_security_green.png",
width: 50.0,
height: 50.0,
),
onPressed: () {
showShort("村道安防工程類項(xiàng)目");
}),
new Center(child: new Text("村道安防工程類項(xiàng)目"))
],
)),
))
],
),
),
],
),
),
);
return new GestureDetector(
child: projectInfo,
);
}
new Container(
child: new Text(title[i]),
);
var listCountItem = new Padding(
padding: const EdgeInsets.fromLTRB(15.0, 10.0, 0.0, 10.0),
child: new Column(
children: <Widget>[
new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(title[i]),
new Container(
height: 200.0,
child: new ListView(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Maps'),
),
new ListTile(
leading: new Icon(Icons.photo_album),
title: new Text('Album'),
),
new ListTile(
leading: new Icon(Icons.phone),
title: new Text('Phone'),
),
],
),
)
],
),
),
// new ListView(
// children: <Widget>[
// new ListTile(
// title: new Text('123123'),
// )
// ],
// )
],
),
);
return new InkWell(
child: listCountItem,
onTap: () {
showShort("1111");
},
);
}
部分控件屬性介紹：
- Container也是一個(gè)widget，允許自定義其子widget账劲。
個(gè)人理解就是一個(gè)容器戳护，可以添加一些別的widget組合成想要的ui樣式 ∑俳梗可添加填充腌且，邊距，邊框或背景色榛瓮。 - BoxDecoration這個(gè)類似shape可以操作內(nèi)填充顏色铺董，圓角等
- Expanded 這個(gè)可以理解為權(quán)重，flex表示當(dāng)前包裹控件所在父布局的權(quán)重比例禀晓。
- children: <Widget>[]這個(gè)屬性相當(dāng)于多個(gè)Item一樣精续，數(shù)組中的每一個(gè)值都可以看做成一個(gè)Item坝锰，具體什么樣的ui樣式看你自己怎么寫。
- mainAxisAlignment和crossAxisAlignment屬性用來對(duì)齊其子項(xiàng)驻右。 對(duì)于行(Row)來說什黑，主軸是水平方向，橫軸垂直方向堪夭。對(duì)于列（Column）來說愕把，主軸垂直方向，橫軸水平方向森爽。具體的詳細(xì)參數(shù)恨豁，對(duì)照官網(wǎng)。
- GestureDetector這個(gè)是用來檢測用戶做出的手勢爬迟，點(diǎn)擊的時(shí)候會(huì)回調(diào)onTap橘蜜，我這邊沒有寫onTap，我是單獨(dú)在iconButton中做的點(diǎn)擊處理付呕。寫的有點(diǎn)問題计福，不過順帶的介紹一下這個(gè)。
- InkWell實(shí)現(xiàn)水波紋徽职，邊框效果象颖，跟BoxDecorationc差不多。
關(guān)于吐司showShort姆钉，分享實(shí)現(xiàn)方式（改的原生）：
-
Android
Android.png
new MethodChannel(getFlutterView(), "com.coofee.flutterdemoapp/sdk/toast")
.setMethodCallHandler(new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
if ("show".equals(methodCall.method)) {
String text = methodCall.argument("text");
int duration = methodCall.argument("duration");
Toast.makeText(MainActivity.this, text, duration).show();
}
}
});
-
IOS
image.png
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GeneratedPluginRegistrant registerWithRegistry:self];
// Override point for customization after application launch.
FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
FlutterMethodChannel* toastChannel = [FlutterMethodChannel
methodChannelWithName:@"com.coofee.flutterdemoapp/sdk/toast"
binaryMessenger:controller];
[toastChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
if ([@"show" isEqualToString:call.method]) {
// 展示toast;
NSLog(@"顯示toast....")
}
}];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
- Flutter
import 'package:flutter/services.dart';
// 下劃線開頭的變量只在當(dāng)前package中可見说订。
const _toast = const MethodChannel('com.coofee.flutterdemoapp/sdk/toast');
const int _LENGTH_SHORT = 0;
const int _LENGTH_LONG = 1;
void show(String text, int duration) async {
try {
await _toast.invokeMethod("show", {'text': text, 'duration': duration});
} on Exception catch (e) {
print(e);
} on Error catch (e) {
print(e);
}
}
void showShort(String text) {
show(text, _LENGTH_SHORT);
}
void showLong(String text) {
show(text, _LENGTH_LONG);
}
-
MyInfo.dart頁面
MyInfo.png
MyInfo相對(duì)上一個(gè)頁面要簡單不少，主要是ListView潮瓶，剩下的就是一些資源的初始化。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/utils/toastdart.dart';
class MyInfo extends StatefulWidget {
@override
createState() => new MyInfoState();
}
class MyInfoState extends State<MyInfo> {
static const double IMAGE_ICON_WIDTH = 30.0;
static const double ARROW_ICON_WIDTH = 16.0;
var inons = [];
var titleTextStyle = new TextStyle(fontSize: 16.0);
var title = ["用戶指南", "地圖設(shè)置", "路網(wǎng)數(shù)據(jù)", "數(shù)據(jù)備份", "項(xiàng)目數(shù)據(jù)更新", "關(guān)于系統(tǒng)", "退出登錄"];
var images = [
"images/one.png",
"images/two.png",
"images/three.png",
"images/four.png",
"images/five.png",
"images/six.png",
"images/senven.png",
];
var rightIcon = new Image.asset(
"images/icon_right.png",
width: IMAGE_ICON_WIDTH,
height: ARROW_ICON_WIDTH,
);
MyInfoState() {
for (int i = 0; i < images.length; i++) {
inons.add(setImages(images[i]));
}
}
//設(shè)置iamge的位置
Widget setImages(path) {
return new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: new Image.asset(path,
width: IMAGE_ICON_WIDTH, height: ARROW_ICON_WIDTH));
}
@override
Widget build(BuildContext context) {
var listview = new ListView.builder(
itemCount: title.length , itemBuilder: (context, i) => renderRow(i));
return listview;
}
renderRow(int i) {
String itemName = title[i];
var itemCount = new Padding(
padding: const EdgeInsets.fromLTRB(25.0, 25.0, 25.0, 25.0),
child: new Row(
children: <Widget>[
inons[i],
new Expanded(
child: new Text(
itemName,
style: titleTextStyle,
)),
rightIcon
],
),
);
return new InkWell(
child: itemCount,
onTap: (){
//toast
showShort(itemName);
// Navigator.of(context).push(new MaterialPageRoute(
// builder: (context)=> new MainActivity()));
},
);
}
}
EdgeInsets類似Android里面的margin毯辅。
總結(jié)：
萬物皆Widget埂伦。
若看的不太舒服，望見諒···
