觀念
- 物件都是Widget
- 樹(shù)狀結(jié)構(gòu)
- 常用元件已定好實(shí)現(xiàn)參數(shù)
==========================資料(post.dart)==========================
class Post{
const Post({//類(lèi)似C++的Constructor
this.title,
this.author,
this.imageUrl,
});
final String title;
final String author;
final String imageUrl;
}
//初始化列表給值
final List<Post> posts = [
Post(
title: 'Title1',
author: 'Author1',
imageUrl: 'https://pics1.baidu.com/feed/c8ea15ce36d3d539258179c355f7fc56342ab0ec.jpeg?token=b1269188a783ffac3a8fa9b5d2b423f8&s=0330E02254AB0AAC261F1CC90000C0B0'
),
Post(
title: 'Title2',
author: 'Author2',
imageUrl: 'https://pics2.baidu.com/feed/6609c93d70cf3bc79b66c0cbbe70afa7cd112a2c.jpeg?token=2770e8c64a553b63aac48448202bfc1a&s=E1F51BC68B042F70104CD8A903005006'
),
Post(
title: 'Title3',
author: 'Author3',
imageUrl: 'https://pics1.baidu.com/feed/1f178a82b9014a909ccf587ff0c72f14b11beeb1.jpeg?token=e7fd680ccbf6aa973c03573b0b8c3012&s=ED85BC540C009C591CA838950300D08C'
),
];
======================列表(listview_demo.dart)======================
import 'package:flutter/material.dart';
import '../model/post.dart';
class MyListView extends StatelessWidget{//StatelessWidge不可改變, StatefullWidget為可改變, 此處僅顯示列表並無(wú)改變採(cǎi)用StatelessWidget
Widget _listItemBuilder(BuildContext context, int index){
return Container(
color: Colors.white,
margin: EdgeInsets.all(8.0),//項(xiàng)目margin
child: Column(//垂直項(xiàng)目Column如android的linearlayout
children: <Widget>[
Image.network(posts[index].imageUrl),//直接使用url便能載入, 可設(shè)填滿(mǎn)的類(lèi)型Image.network(posts[index].imageUrl, fit: BoxFit.fill,width: double.infinity,)
SizedBox(height: 16.0,),//設(shè)空白高度(間距)
Row(//水平項(xiàng)目
mainAxisAlignment: MainAxisAlignment.start,//內(nèi)容置左
children: <Widget>[
Icon(Icons.check_circle, size: 30.0, color: Colors.grey[300]),
Image.network(posts[index].imageUrl, width: 50,),
new Expanded(child: Text(//填滿(mǎn)該文字
posts[index].title,
style: Theme.of(context).textTheme.title,
textAlign: TextAlign.right,
),)
]
),
Text(
posts[index].title,
style: Theme.of(context).textTheme.title
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subhead
),
SizedBox(height: 16.0,)
]
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
);
}
}
======================抽屜(drawer_demo.dart)======================
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
drawer: MyDrawer(),
),
);
}
}
import 'package:flutter/material.dart';
class MyDrawer extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Drawer(
child: ListView(
padding: EdgeInsets.zero,//該項(xiàng)目無(wú)間距
children: <Widget>[
UserAccountsDrawerHeader(//大頭照及名稱(chēng)信箱
accountName: Text('Adam', style: TextStyle(fontWeight: FontWeight.bold),),
accountEmail: Text('xxx@gmail.com', ),
currentAccountPicture: CircleAvatar(//圓形圖
backgroundImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580055708032&di=1ce2fa1deb54ead52a9020c4beb7cd97&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fa8014c086e061d9513b305a87bf40ad163d9caac.jpg'),
),
decoration: BoxDecoration(//大頭照底面
color: Colors.yellow[400],
image: DecorationImage(//裝飾圖片
image: NetworkImage('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2232748475,1633793751&fm=26&gp=0.jpg'),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(//濾鏡withOpacity給透明度
Colors.yellow[400].withOpacity(0.6),
BlendMode.hardLight
)
)
),
),
ListTile(//圖片文字項(xiàng)目, MyListView中Row的簡(jiǎn)單應(yīng)用可採(cǎi)用這個(gè)
title: Text('Message', textAlign: TextAlign.right,),
trailing: Icon(Icons.message, color: Colors.black12, size: 22.0,),//圖片在頭用leading, 在尾用trailing
onTap: () => Navigator.pop(context),
),
ListTile(
title: Text('Favorite', textAlign: TextAlign.right,),
trailing: Icon(Icons.favorite, color: Colors.black12, size: 22.0,),
onTap: () => Navigator.pop(context),
),
ListTile(
title: Text('Setting', textAlign: TextAlign.right,),
trailing: Icon(Icons.settings, color: Colors.black12, size: 22.0,),
onTap: () => Navigator.pop(context),
)
],
),
);
}
}
======================Tab(main.dart)======================
import 'package:flutter/material.dart';
import 'demo/basic_demo.dart';
import 'demo/bottom_navigationbar_demo.dart';
import 'demo/drawer_demo.dart';
import 'demo/listview_demo.dart';
import 'demo/hello_demo.dart';
void main() => runApp(App());
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home:Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(255,255, 255, 0.5),
splashColor: Colors.white70
),
);
}
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,//tab有三頁(yè)
child: Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(//設(shè)定標(biāo)題列
leading: IconButton(//左側(cè)按鈕, 不給會(huì)預(yù)設(shè)菜單紐, 點(diǎn)擊會(huì)彈開(kāi)drawer
icon: Icon(Icons.star),
tooltip: 'Navigration',
onPressed: () => debugPrint('Navigration button is pressed!')
),
title: Text('Adam'),
centerTitle: true,
actions: <Widget>[//右側(cè)其餘按鈕, 可多個(gè)
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: () => debugPrint('Search button is pressed!')
),
],
elevation: 0.0,//tab下方陰影, 0為沒(méi)陰影
bottom: TabBar(
unselectedLabelColor: Colors.black38,
indicatorColor: Colors.black54,
indicatorSize: TabBarIndicatorSize.label,//下方線寬度, label為包住按鈕內(nèi)容, tab為整個(gè)tab寬度
indicatorWeight: 1.0,
tabs: <Widget>[
Tab(icon: Icon(Icons.local_florist), text: 'test123',),//按鈕下方文字
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
]),
),
body: TabBarView(//設(shè)定tab頁(yè)面內(nèi)容, 可隨意給Icon, Text或自製的頁(yè)面
children: <Widget>[
MyListView(),
Icon(Icons.change_history, size: 128.0, color: Colors.black12),
Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
]
),
//drawer: Container
drawer: MyDrawer(),//設(shè)置抽屜
bottomNavigationBar: MyBottomNavigationBar(),//設(shè)置底部按鈕
),
);
}
}
================底部按鈕(bottom_navigationbar_demo.dart)================
import 'package:flutter/material.dart';
class MyBottomNavigationBar extends StatefulWidget{//點(diǎn)下方按鈕要切換index, 用StatefulWidget
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _BottomNavigationBarDemoState();
}
}
class _BottomNavigationBarDemoState extends State<MyBottomNavigationBar>{
int _currentIndex = 0;
void _onTabHandler(int index){//點(diǎn)擊動(dòng)作, 設(shè)置index
setState((){
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return BottomNavigationBar(
currentIndex: _currentIndex,
onTap: _onTabHandler,
type: BottomNavigationBarType.fixed,//按鈕為固定型態(tài)
fixedColor: Colors.black,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.explore),
title: Text('Explore'),
),
BottomNavigationBarItem(
icon: Icon(Icons.history),
title: Text('History'),
),
BottomNavigationBarItem(
icon: Icon(Icons.list),
title: Text('List'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('My'),
),
]
);
}
}
