這是Flutter Thursday系列的首篇文章。我們會(huì)在今后每周從互聯(lián)網(wǎng)上尋找一些APP設(shè)計(jì)轉(zhuǎn)換成Flutter UI票从。
假設(shè)讀者已經(jīng)了解Dart(Flutter應(yīng)用開發(fā)語言)并設(shè)置了編譯環(huán)境跳仿,所以不會(huì)再介紹Dart及Flutter的安裝步聚留美,只會(huì)解釋一些概念和相關(guān)問題贸呢。接下來我們將做一個(gè)簡(jiǎn)單的任務(wù):一個(gè)移動(dòng)APP的dashboard,如下圖:
開啟終端并創(chuàng)建一個(gè)新應(yīng)用:
flutter create dashboard
cd dashboard
Flutter會(huì)自動(dòng)生成一個(gè)有良好注釋的主文件放在lib目錄下(lib/main.dart)瓷叫。刪掉主程序文件內(nèi)容并創(chuàng)建dashboard.dart
在同目錄下屯吊。增加main.dart內(nèi)容如下:
import 'package:flutter/material.dart';
import 'package:dashboard/dashboard.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: Dashboard(),
);
}
}
MyApp
是應(yīng)用根類。runApp()
方法加載(inflates)MyApp組件并展示到屏幕摹菠。Flutter支持material設(shè)計(jì)盒卸,需要調(diào)用MaterialApp
類。
Home
定義了默認(rèn)路由次氨,本例中為:Dashboard()
蔽介。
dashboard.dart文件內(nèi)容如下:
import 'package:flutter/material.dart';
class Dashboard extends StatefulWidget {
@override
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Awesome Dashboard is coming!"),
),
);
}
}
接著對(duì)AppBar提升至0.1,改變標(biāo)題文本及背景色:
appBar: AppBar(
title: Text("INDHOLD"),
elevation: .1,
backgroundColor: Color.fromRGBO(49, 87, 110, 1.0),
),
接著編寫一個(gè)grid顯示dashboard項(xiàng)煮寡。增加body
組件屉佳,設(shè)置為Container
,設(shè)置padding并加入GridView.count
做為子組件洲押。代碼如下:
body: Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 8.0),
child: GridView.count(
crossAxisCount: 2,
padding: EdgeInsets.all(3.0),
children: <Widget>[],
),
),
設(shè)置container外間距橫縱分別為20像素和8像素。使用crossAxisCount:2定義兩列g(shù)rid圆凰,GridView
子組件為children——children:<Widget>[]杈帐。接下來創(chuàng)建一個(gè)函數(shù)返回Card
組件的自定義項(xiàng),命名為makeDashboardItem(String title,IconData icon)
,名含title和icon兩個(gè)參數(shù)挑童,這會(huì)展示在dashboard的項(xiàng)目中
Card makeDashboardItem(String title, IconData icon) {
return Card(
elevation: 1.0,
margin: new EdgeInsets.all(8.0),
child: Container(
));
}
Card
設(shè)置elevation和margins累铅,并增加Container的子組件,以下為Card
組件內(nèi)容:
Card makeDashboardItem(String title, IconData icon) {
return Card(
elevation: 1.0,
margin: new EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(color: Color.fromRGBO(220, 220, 220, 1.0)),
child: new InkWell(
onTap: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
verticalDirection: VerticalDirection.down,
children: <Widget>[
SizedBox(height: 50.0),
Center(
child: Icon(
icon,
size: 40.0,
color: Colors.black,
)),
SizedBox(height: 20.0),
new Center(
child: new Text(title,
style:
new TextStyle(fontSize: 18.0, color: Colors.black)),
)
],
),
),
));
}
在container容器中站叼,使用BoxDecoration(color:Color.fromRGBO(220,200,200,1.0))
設(shè)置顏色娃兽。container容器需要一個(gè)子組件,在這里使用InkWell
組件尽楔,這樣可以對(duì)每一個(gè)項(xiàng)目進(jìn)行觸控事件響應(yīng)投储。在InkWell
組件中定義子組件Column
,顯示children:兩個(gè)包含圖標(biāo)和文本Center
組件阔馋;兩個(gè)SizedBox
對(duì)其進(jìn)行垂直分割玛荞。
使用makeDashboardItem
函數(shù)填充GridView.count的子組件列表
body: Container(
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 2.0),
child: GridView.count(
crossAxisCount: 2,
padding: EdgeInsets.all(3.0),
children: <Widget>[
makeDashboardItem("Ordbog", Icons.book),
makeDashboardItem("Alphabet", Icons.alarm),
makeDashboardItem("Alphabet", Icons.alarm),
makeDashboardItem("Alphabet", Icons.alarm),
makeDashboardItem("Alphabet", Icons.alarm),
makeDashboardItem("Alphabet", Icons.alarm)
],
),
),
運(yùn)行app顯示以下內(nèi)容: