繼續我們的flutter之旅，今天學首頁怎麼寫，APP的首頁目前比較單一，都是下面幾個菜單，上面幾個菜單，或者側面一個我的，所以可以寫一個活的套用，以後就不用麻煩了。
前言：樣式自定義基本上都是一樣的，什麼圓角，什麼陰影，什麼旋轉，什麼漸變，總結一下以後別忘了。
樣式1：
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
//Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
//Stateful widgets 持有的狀態可能在widget生命週期中發生變化. 實現一個 stateful widget 至少需要兩個類:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "樣式佈局",
home: new Scaffold(
appBar: new AppBar(
title: new Text("樣式佈局"),
),
body: new Center(
child: new FormTestRoute1(),
),
),
);
}
}
class FormTestRoute1 extends StatefulWidget {
@override
_FormTestRouteState1 createState() => new _FormTestRouteState1();
}
class _FormTestRouteState1 extends State {
@override
Widget build(BuildContext context) {
return Padding(
//上下左右各添加16像素補白
padding: EdgeInsets.all(16.0),
child: Column(
//顯式指定對齊方式為左對齊，排除對齊干擾
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
//左邊添加8像素補白
padding: const EdgeInsets.only(left: 8.0),
child: Text("hi yun1"),
),
Padding(
//上下各添加8像素補白
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text("hi yun2"),
),
Padding(
// 分別指定四個方向的補白
padding: const EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0),
child: Text("hi yun3"),
),
DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.orange[700]]), //背景漸變
borderRadius: BorderRadius.circular(3.0), //3像素圓角
boxShadow: [
//陰影
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0)
]),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
child: Text(
"Login",
style: TextStyle(color: Colors.white),
),
)),
],
),
);
}
}
樣式2：
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
//Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
//Stateful widgets 持有的狀態可能在widget生命週期中發生變化. 實現一個 stateful widget 至少需要兩個類:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "樣式佈局",
home: new Scaffold(
appBar: new AppBar(
title: new Text("樣式佈局"),
),
body: new Center(
child: new FormTestRoute1(),
),
),
);
}
}
class FormTestRoute1 extends StatefulWidget {
@override
_FormTestRouteState1 createState() => new _FormTestRouteState1();
}
class _FormTestRouteState1 extends State {
@override
Widget build(BuildContext context) {
return Padding(
//上下左右各添加16像素補白
padding: EdgeInsets.all(16.0),
child: Column(
//顯式指定對齊方式為左對齊，排除對齊干擾
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(
top: 50.0, left: 120.0, right: 0.0, bottom: 50.0),
//容器外補白
constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
//卡片大小
decoration: BoxDecoration(
//背景裝飾
gradient: RadialGradient(
//背景徑向漸變
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98),
boxShadow: [
//卡片陰影
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0)
]),
transform: Matrix4.rotationZ(.2),
//卡片傾斜變換
alignment: Alignment.center,
//卡片內文字居中
child: Text(
//卡片文字
"5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
),
),
Container(
margin: EdgeInsets.all(20.0), //容器外補白
color: Colors.orange,
child: Text("hi yun~"),
),
Container(
padding: EdgeInsets.all(20.0), //容器內補白
color: Colors.orange,
child: Text("hi yun~"),
),
],
),
);
}
}
Scaffold：
大多數路由頁都會包含一個導航欄，有些路由頁可能會有抽屜菜單(Drawer)以及底部Tab導航菜單等。如果每個頁面都需要開發者自己手動去實現，這會是一件非常無聊的事。幸運的是，我們前面提到過，Flutter Material庫提供了一個Scaffold Widget，它是一個路由頁的骨架，可以非常容易的拼裝出一個完整的頁面。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
//Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
//Stateful widgets 持有的狀態可能在widget生命週期中發生變化. 實現一個 stateful widget 至少需要兩個類:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "Scaffold首頁",
home: new Scaffold(
// appBar: new AppBar(
// title: new Text("Scaffold首頁"),
// ),
body: new Center(
child: new FormTestRoute1(),
),
),
);
}
}
class FormTestRoute1 extends StatefulWidget {
@override
_FormTestRouteState1 createState() => new _FormTestRouteState1();
}
class _FormTestRouteState1 extends State
with SingleTickerProviderStateMixin {
int _selectedIndex = 1;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
void _onAdd() {}
TabController _tabController;
List tabs = ["Yun1", "Yun2", "Yun3"];
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: tabs.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Scafford首頁"),
leading: Builder(builder: (context) {
return IconButton(
icon: Icon(Icons.dashboard, color: Colors.white), //自定義圖標
onPressed: () {
// 打開抽屜菜單
Scaffold.of(context).openDrawer();
},
);
}),
actions: [
IconButton(
icon: Icon(
Icons.share,
),
onPressed: () {},
),
],
bottom: TabBar(
controller: _tabController,
tabs: tabs.map((e) => Tab(text: e)).toList(),
),
),
drawer: new MyDrawer(),
body: TabBarView(
controller: _tabController,
children: tabs.map((e) {
return Container(
alignment: Alignment.center,
child: Text(
e,
textScaleFactor: 5,
),
);
}).toList(),
),
// bottomNavigationBar: BottomNavigationBar(
// items: [
// BottomNavigationBarItem(
// icon: Icon(Icons.home), title: new Text("Yun1")),
// BottomNavigationBarItem(
// icon: Icon(Icons.business), title: new Text("Yun2")),
// BottomNavigationBarItem(
// icon: Icon(Icons.school), title: new Text("Yun3")),
// ],
// currentIndex: _selectedIndex,
// fixedColor: Colors.blueGrey,
// onTap: _onItemTapped,
// ),
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(), // 底部導航欄打一個圓形的洞
child: Row(
children: [
IconButton(icon: Icon(Icons.home)),
SizedBox(), //中間位置空出
IconButton(icon: Icon(Icons.business)),
],
mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部導航欄橫向空間
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: _onAdd,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
// 抽屜
class MyDrawer extends StatelessWidget {
const MyDrawer({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
child: MediaQuery.removePadding(
context: context,
// DrawerHeader consumes top MediaQuery padding.
removeTop: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 38.0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: ClipOval(
child: Image.asset(
"imgs/avatar.png",
width: 80,
),
),
),
Text(
"Wendux",
style: TextStyle(fontWeight: FontWeight.bold),
)
],
),
),
Expanded(
child: ListView(
children: [
ListTile(
leading: const Icon(Icons.add),
title: const Text('Add account'),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('Manage accounts'),
),
],
),
),
],
),
),
);
}
}
總結：這塊的關鍵leading，TabBar，TabBarView，BottomNavigationBar，BottomAppBar的使用，寫法都是固定的，需要相互配合，多練吧~
分享到:
