flutter 分层数据显示 类似于第一章的第一节显示 网络请求渲染 开源代码
flutter 分层数据显示 类似于第一章的第一节显示 网络请求渲染 开源代码
- 效果图
- 数据json格式
- 总StatefulWidget StudyDetailVideoPage
-
- 数据通过widget传递到内层
- 数据json格式
-
- 可以静态 可以通过接口获得
- 总Widget build中代码
-
- CategoryList为新的StatefulWidget
- 必须新建这个StatefulWidget 不然做不到每个小的分层被独立
- CategoryList这个 StatefulWidget
-
- 里面的第一层、第二层被抽象出来变为一个widget
- buildFirstInkWell核心代码
- buildSecondInkWell核心代码
- 全部代码
- 第一层右边箭头效果
-
- 点击箭头后箭头可以转90度
效果图
在这里插入图片描述](https://img-blog.csdnimg.cn/20210508112618436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lvdXRpYW5rZW5n,size_16,color_FFFFFF,t_70)
数据json格式
总StatefulWidget StudyDetailVideoPage
数据通过widget传递到内层
数据json格式
可以静态 可以通过接口获得
List info = [
{
"chapter": "分治策略",
"courseVideoList": [
{
"videoName": "分治策略的思想","videoPath":""},
{
"videoName": "分治策略2","videoPath":""},
{
"videoName": "分治策略3","videoPath":""}
]
},
{
"chapter": "动态规划",
"courseVideoList": [
{
"videoName": "动态规划1","videoPath":""},
{
"videoName": "动态规划3","videoPath":""},
{
"videoName": "动态规划3","videoPath":""}
]
},
{
"chapter": "贪心法",
"courseVideoList": [
{
"videoName": "贪心法1","videoPath":""},
{
"videoName": "贪心法2","videoPath":""},
{
"videoName": "贪心法3","videoPath":""}
]
},
];
总Widget build中代码
CategoryList为新的StatefulWidget
必须新建这个StatefulWidget 不然做不到每个小的分层被独立
ListView.builder(
key: UniqueKey(),
itemCount: info.length,
itemBuilder: (context, index) {
return CategoryList(info[index]);
})
CategoryList这个 StatefulWidget
里面的第一层、第二层被抽象出来变为一个widget
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Divider(),
buildFirstInkWell(),
buildSecondInkWell()
],
),
)
buildFirstInkWell核心代码
Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(10),
child: Text(
"${widget.info['chapter']}",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
),
)),
RotationTransition(
turns: _animationController,
child: Icon(Icons.arrow_right),
)
],
),
buildSecondInkWell核心代码
Container(
padding: EdgeInsets.all(12),
child: Text("${item['videoName']}"),)
全部代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:loading_indicator_view/loading_indicator_view.dart';
import 'package:qituant_flutter_app/views/api/SpUtil.dart';
import '../api/api2.dart';
import '../api/FutureDioToken.dart';
String generalId;
class StudyDetailVideoPage extends StatefulWidget {
final arguments;
StudyDetailVideoPage({
this.arguments});
@override
_StudyDetailVideoPageState createState() => _StudyDetailVideoPageState();
}
class _StudyDetailVideoPageState extends State<StudyDetailVideoPage> {
// List info = [
// {
// "chapter": "分治策略",
// "courseVideoList": [
// {"videoName": "分治策略的思想","videoPath":""},
// {"videoName": "分治策略2","videoPath":""},
// {"videoName": "分治策略3","videoPath":""}
// ]
// },
// {
// "chapter": "动态规划",
// "courseVideoList": [
// {"videoName": "动态规划1","videoPath":""},
// {"videoName": "动态规划3","videoPath":""},
// {"videoName": "动态规划3","videoPath":""}
// ]
// },
// {
// "chapter": "贪心法",
// "courseVideoList": [
// {"videoName": "贪心法1","videoPath":""},
// {"videoName": "贪心法2","videoPath":""},
// {"videoName": "贪心法3","videoPath":""}
// ]
// },
// ];
List info=[];
@override
void initState() {
super.initState();
FutureDio('get', Api2.GetCourseVideo,{
"generalId":widget.arguments['id']} ).then((res){
print(res.data);
setState(() {
generalId=widget.arguments['id'];
info=res.data['data'];
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
// appBar: new AppBar(
// automaticallyImplyLeading: false,
// centerTitle: true,
// title: new Text("我的学习"),
// backgroundColor: Color(0xff3954A3),
// ),
body: info.isNotEmpty? Container(
child: ListView.builder(
key: UniqueKey(),
itemCount: info.length,
itemBuilder: (context, index) {
return CategoryList(info[index]);
}),
):Center(
child: BallSpinFadeLoaderIndicator(
ballColor: Color(0xff3954A3),
maxBallAlpha: 200,
maxBallRadius: 4,
),
));
}
}
class CategoryList extends StatefulWidget {
final Map info;
CategoryList(this.info);
@override
_CategoryListState createState() => _CategoryListState();
}
///分层数据
class _CategoryListState extends State<CategoryList> with SingleTickerProviderStateMixin {
bool isExpand = false;
AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController =
AnimationController(lowerBound: 0.0, upperBound: 0.25, vsync: this, duration: Duration(milliseconds: 400));
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Divider(),
buildFirstInkWell(),
buildSecondInkWell()
],
),
);
}
InkWell buildFirstInkWell() {
return InkWell(
onTap: () {
if (_animationController.isCompleted) {
isExpand=false;
_animationController.reverse();
}
else {
isExpand=true;
_animationController.reset();
_animationController.forward();
}
setState(() {
});
},
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(10),
child: Text(
"${widget.info['chapter']}",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
),
)),
RotationTransition(
turns: _animationController,
child: Icon(Icons.arrow_right),
)
],
),
);
}
buildSecondInkWell() {
if (!isExpand) {
return Container();
}
return ListView.builder(
shrinkWrap: true,
itemCount: widget.info['courseVideoList'].length,
itemBuilder: (context, index) {
Map item = widget.info['courseVideoList'][index];
return InkWell(
onTap: (){
FutureDio('post', Api2.RecordWatchVideo,{
"chapterName": widget.info['chapter'],
"coursePicture": SpUtil.preferences.getString("coursePicture"),
"courseTitle": SpUtil.preferences.getString("courseTitle"),
"generalId": generalId,
"orderId": SpUtil.preferences.getString("orderId"),
"userId": SpUtil.preferences.getString("user_id"),
"videoName": item['videoName'],
"videoPath": item['videoPath']
}
).then((res){
print(res.data);
});
Navigator.pushNamed(context, '/videoScreen',arguments: {
"id":item['videoPath'],"name":item['videoName']});
},
child:Container(
padding: EdgeInsets.all(12),
child: Text("${item['videoName']}"),)
);
});
}
}
第一层右边箭头效果
点击箭头后箭头可以转90度
主要代码
onTap: () {
if (_animationController.isCompleted) {
isExpand=false;
_animationController.reverse();
}
else {
isExpand=true;
_animationController.reset();
_animationController.forward();
}
setState(() {
});
},