Flutter⼊门进阶之旅-Flutter课程表View
前⾔
上⼀节中我们⼀块学习Flutter⽣命周期相关的基本知识，了解到了在flutter中⽣命周期函数存在的意义以及各个不同⽣命周期函数的回调时机，到⽬前为⽌我们已经完成了对Flutter所有⼊门相关的课程学习，掌握了各种常⽤组件的使⽤⽅法以及使⽤路由来完成页⾯切换传递数据，还学习了在flutter中的数据存储，⽹络请求等⼀系列的相关课程。本次课程作为基础到进阶到过度篇，咱们来⼀块利⽤所学知识做⼀个课程表View，对Flutter相关知识点加以巩固提⾼，做到活学活⽤。
1.课程⽬标
分析课表view组成部分，拆解绘制流程
课表view绘制，数据准备
⾃⾏利⽤所学Widget组合课表view
2.效果图
我们先来看下已经绘制好的课程表View效果图，然后对效果图上的具体实现流程做拆解分析，⼀步步来完成Flutter课程表view的实现。
从上⾯的效果图我们可以分析得出，该课表view可分解成下⾯⼏个部分，我⽤不同的颜⾊块标记出
整体可分为三个⼤块
1 顶部蓝⾊框框圈住的⽇期星期区域
2 左侧灰⾊框框圈住的课程节次索引区域
3 中间绿⾊框框圈起来的课程信息区域
下⾯我们来追⼀看不同区域的具体实现代码
3. View拆分
3.1 顶部⽇期星期View
顶部⽇期View可以拆解为GridView+Column组成，之所以选择GridView是因为我们要做到Column⾥的数据每⼀个item都均分显⽰，GridView设置单⾏显⽰，Colum设置上⾯view是星期，下⾯view是⽇期，利⽤⼩算法计算出当前⽇期，然后给当前⽇期设置不同的样式，来提⽰⽤户。
分析了实现思路，具体代码我就不详细讲解了贴上顶部⽇期星期的具体实现代码供读者参考
星期⽇期View代码：
import'package:flutter/cupertino.dart';
import'package:flutter/material.dart';
import'package:flutter_app/pages/custom_widget/widget/SpaceWidget.dart';
/**
* desc:
* desc:
* author: xiedong
* date: 4/25/21
**/
class SyllabusPage extends StatefulWidget {
@override
State<StatefulWidget>createState()=> PageState();
}
class PageState extends State<SyllabusPage>{
var weekList =['周⼀','周⼆','周三','周四','周五','周六','周⽇'];
var dateList =[];
var currentWeekIndex =0;
@override
void initState(){
super.initState();
var monday =1;
var mondayTime = w();
//获取本周星期⼀是⼏号
while(mondayTime.weekday != monday){
mondayTime = mondayTime.subtract(new Duration(days:1));
}
// nowTime.hour ;//6 时
flutter开发app// nowTime.minute ;//6 分
// nowTime.second ;//6 秒
for(int i =0; i <7; i++){
dateList.add(
if((mondayTime.day + i)== w().day){
setState((){
currentWeekIndex = i +1;
});
}
}
// print('Recent monday '+w().String());
}
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text("我的课表"),
centerTitle:true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children:[
SizedBox(
child: GridView.builder(
shrinkWrap:true,
physics: NeverScrollableScrollPhysics(),
itemCount:8,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:8, childAspectRatio:1/1),
itemBuilder:(BuildContext context,int index){
return Container(
color: index ==this.currentWeekIndex
? Color(0xf7f7f7)
: Colors.white,
: Colors.white,
child: Center(
child: index ==0
? Column(
mainAxisAlignment: , children:[
Text("星期",
style: TextStyle(
fontSize:14, color: Colors.black87)),
SpaceWidget(height:5),
Text("⽇期", style: TextStyle(fontSize:12)),
],
)
:
Column(
mainAxisAlignment: , children:[
Text(weekList[index -1],
style: TextStyle(
fontSize:14,
color: index == currentWeekIndex
? Colors.lightBlue
: Colors.black87)),
SpaceWidget(height:5),
Text(dateList[index -1],
style: TextStyle(
fontSize:12,
color: index == currentWeekIndex
? Colors.lightBlue
: Colors.black87)),
],
),
),
);
}),
),
],
)
,
);
}
}
运⾏代码后，效果如下图所⽰：
3.2 中间课表view
中间课表view跟左侧课程节次指引是在⼀个⼤View⾥处理的，考虑到有些⼿机可能⼀屏显⽰不完整个课程表视图，这⾥我实现的逻辑是
1 先把上图标号为2跟3的区域包裹在⼀个SingleChildScrollView⾥让整个View⽀持上下滑动，
2.然后在SingleChildScrollView ⾥⽤Row包裹2跟3区域，2是⼀个GridView，整体布局1列10⾏，跟课表view保持⾼度⼀样，
3 .区域3⼜分为两部分，⼀个是背景格⼦区域，另外⼀个带背景颜⾊的课表区域 ，整个3区域我还是利⽤GridView实现，
4 在这⾥，我默认让每个课程View即图中标号为4 的区域占两个课程格⼦的⼤⼩，这样⼀周7天，每天有5⼤节课，所以GridView需要设置为5⾏7
列，供35个item，然后让区域3跟左侧2区域⾼度⼀致，
5 区域3 GridView中的每⼀个Item采⽤Stack布局，底下的⼀层view⽤Column包括两个⾼度⼀样的Container，设置好边框，让他呈现格⼦的样
式，顶上的⼀层试图⽤来显⽰课程信息，背景颜⾊利⽤提前设置好的颜⾊数组值，每次随机取不同的值设置不同的颜⾊，再利⽤Center组件显⽰课程具体信息。
6 左侧区域2 课程指引view设置相同的背景即可，不需要特殊处理
核⼼代码如下：
Expanded(
child: SingleChildScrollView(
child: Row(
children:[
Expanded(
flex:1,
child: GridView.builder(
shrinkWrap:true,
// physics:ClampingScrollPhysics(),
itemCount:10,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:1, childAspectRatio:1/2),
itemBuilder:(BuildContext context,int index){
return Container(
// width: 25,
// height:s 80,
child: Center(
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论