Also a record of just learning, I remember very complex.
main.dart
//导入相关控件
import 'package:flutter/material.dart';
import 'components/list.dart';
//入口方法-制定首页
void main() => runApp(MyApp());
//首页(StatelessWidget代表无状态控件,无状态控件内部没有私有数据,纯展示页面)
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
//返回了一个应用程序,每个项目都必须有一个
return MaterialApp(
//程序标题
title: 'Flutter Demo1',
//主题
theme: ThemeData(
//主题色
primarySwatch: Colors.blue,
),
//指向首页
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//首页(有窗台页面,允许页面数据动态改变)
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
//每个动态页面都必须重写 createState 方法 返回一个 本类的子类,在子类中必须实现build方法
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
//定义事件
void _incrementCounter() {
//通知框架重回页面
setState(() {
_counter++;
});
}
void _decrementCounter() {
//通知框架重回页面
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
// 如果添加TabBar 必须加一个控制器
return DefaultTabController(
//需要添加 Scaffold 包含页面基本的组成单元(例如头部导航AppBar,主体body,侧标抽屉drawer)
child: Scaffold(
//导航条
appBar: AppBar(
//导航条文字
title: Text("Gecer"),
//文本显示居中
centerTitle: false,
//右侧行为按钮,可以定义多个
actions: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: _incrementCounter),
IconButton(icon: Icon(Icons.delete), onPressed: _decrementCounter)
],
),
//侧边栏
drawer: Drawer(
child: ListView(
//去上边栏灰色条
padding: EdgeInsets.all(0),
children: <Widget>[
//固定格式的用户信息介绍
UserAccountsDrawerHeader(
accountEmail: Text('[email protected]'),
accountName: Text('Gecer'),
//头像
currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage('https://profile.csdnimg.cn/E/A/C/1_weixin_39370093'),),
//美化控件
decoration:BoxDecoration(
//背景图片
image: DecorationImage(
fit: BoxFit.cover,
image:NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580181236422&di=6f0c4c5ebd74e901d2d113e0a2cffa3f&imgtype=0&src=http%3A%2F%2Fclubfiles.libaclub.com%2F2011%2F11%2F02%2F23%2F33796585.jpg')
)
) ,
),
//列表项
ListTile(title: Text('2020'),trailing: Icon(Icons.grade,color: Colors.red,),),
ListTile(title: Text('国泰民安'),trailing: Icon(Icons.grade,color: Colors.orange),),
Divider(color: Colors.amberAccent,),
ListTile(title: Text('祝大家新年快乐,阖家幸福',style: TextStyle(color:Colors.orange ),),trailing: Icon(Icons.grade,color: Colors.orange),),
],),
),
//底部导航栏 Container是为了给底部导航栏加样式
bottomNavigationBar:Container(
//一般高度都是50
height: 50,
decoration: BoxDecoration(color: Colors.black),
child: TabBar(
//设置文本(解决文字压缩没了的问题)
labelStyle: TextStyle(height: 0,fontSize: 10),
tabs: <Widget>[
Tab(text: '2020',icon:Icon(Icons.star) ),
Tab(text: '新年快乐',icon:Icon(Icons.star) ),
Tab(text: '万事大吉',icon:Icon(Icons.star) ),
],
),),
//主体
body: Center(
child: TabBarView(children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'To be or not to be.',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
]),
DataList(type: '新年快乐',),
DataList(type: '万事大吉'),
],),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),length: 3,);
}
}
list.dart
import 'package:flutter/material.dart';
import 'detail.dart';
class DataList extends StatefulWidget{
DataList({Key key,this.type}):super(key:key);
final String type;
@override
State<StatefulWidget> createState(){
return _DataListState();
}
}
//状态管理类
//with AutomaticKeepAliveClientMixin 是为了保持页面的状态 比如滚动到那个位置 于此同时还要 将下面wantKeepAlive 变成如下写法
class _DataListState extends State<DataList> with AutomaticKeepAliveClientMixin{
@override
bool get wantKeepAlive =>true;
var dataList=[
'2020'
];
var imageList=[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580227063290&di=89f97a4c9ec8444b4b88af8ab165ccba&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F95b71fbe29cf87911fc7063d5fce64c94c256fd42a0b3-4QwhcJ_fw658',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580226978016&di=a07323d0a9d56c6bf4b01317d8dfe129&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F05%2F20180205184357_irwly.thumb.700_0.jpg'
];
@override
void initState() {
// TODO: implement initState
super.initState();
dataList.add(widget.type);
}
@override
Widget build(BuildContext context){
//ListView.builder 循环创建子元素
return ListView.builder(itemCount: dataList.length, itemBuilder:(BuildContext context,int i){
//添加事件
return GestureDetector(
// 点击事件
onTap:(){
Navigator.push(context,MaterialPageRoute(builder: (BuildContext context){
return Detail(type: widget.type,);
}));
},
child: Container(
decoration: BoxDecoration(
border: Border(
bottom:BorderSide(color: Colors.black12)
)
),
padding: EdgeInsets.all(10),
child: Row(children: <Widget>[
Image.network(imageList[i],width: 100,height: 100 ,fit: BoxFit.cover,),
Column(
//主轴
mainAxisAlignment: MainAxisAlignment.center,
//侧轴
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(child:Text(dataList[i],style: TextStyle(fontSize: 20),),margin: EdgeInsets.only(left: 10),)
],
)
])
)) ;
} );
}
}
detail.dart
import 'package:flutter/material.dart';
class Detail extends StatefulWidget{
Detail({Key key,this.type}):super(key:key);
final String type;
@override
State<StatefulWidget> createState(){
return _Detail();
}
}
class _Detail extends State<Detail>{
@override
Widget build(BuildContext context){
return Scaffold(
body:Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(widget.type,style: TextStyle(color: Colors.red,fontSize: 30),)
],
),
),
//导航条
appBar: AppBar(
//导航条文字
title: Text("Gecer"),
//文本显示居中
centerTitle: false,
//右侧行为按钮,可以定义多个
),
) ;
}
}