截屏2021-01-18 08.40.13.png
要实现上面的效果,每个种类的标签横向滚动,实现的方式,最外层的大分类标签一个ListView,每个分类的标签也是ListView 设置横向滚动结合Wrap组件就能实现。
Widget _categoryListView(
DiscoverCategoryState state, Dispatch dispatch, BuildContext context) {
return Container(
height: state.categoryList.length * 35.0,
child: ListView.builder(
itemBuilder: (context, index) {
return CategoryItem(
data: state.categoryList[index],
dispatch: dispatch,
);
},
itemCount: state.categoryList.length,
),
);
}
class CategoryItem extends StatefulWidget {
CategoryItem({
Key key,
this.data,
this.dispatch,
});
final SubjectICEDTO data;
final Dispatch dispatch;
@override
_CategoryItemState createState() => _CategoryItemState();
}
class _CategoryItemState extends State<CategoryItem> {
List<SubjectDto> categoryList = [];
int _categorySelectedIndex = 0;
ScrollController _controller; // 执行动画的controller
@override
void initState() {
super.initState();
_getCategory();
}
void _getCategory(){
SubjectDto subjectDto = new SubjectDto();
subjectDto.id = widget.data.id;
subjectDto.name = widget.data.name;
subjectDto.subjectTypeEnum = widget.data.subjectTypeEnum;
categoryList.addAll(widget.data.subjectDtos);
for(int i = 0;i< 10;i++){
SubjectDto subjectDto = new SubjectDto();
subjectDto.id = widget.data.id;
subjectDto.name = widget.data.name+i.toString();
subjectDto.subjectTypeEnum = widget.data.subjectTypeEnum;
categoryList.add(subjectDto);
}
categoryList.insert(0, subjectDto);
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(left: 16,right: 16,bottom: 5),
height: 30,
child: ListView.builder(
// physics:NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal, // 横向滚动
controller: _controller, // 滚动的controller
itemBuilder: (context, index) {
return _categoryWrapWidget();
},
),
);
}
Widget _categoryWrapWidget() {
return Row(
children: [
Wrap(
spacing: 10.0, //两个widget之间横向的间隔
direction: Axis.horizontal, //方向
alignment: WrapAlignment.start, //内容排序方式
children: List<Widget>.generate(
categoryList.length,
(int index) {
return ChoiceChipWidget(
fontSize: 13,
height: 23,
borderRadius: BorderRadius.all(Radius.circular(15)),
text: categoryList[index].name,
selected: _categorySelectedIndex == index,
textSelectColor: ColorsUtil.hexStringColor('EC1B23'),
textColor: ColorsUtil.hexStringColor('111E36'),
selectBorder: Border.fromBorderSide(BorderSide(
color: ColorsUtil.hexStringColor('EC1B23'),
width: 1,
style: BorderStyle.solid)),
border: Border.fromBorderSide(BorderSide(
color: Colors.transparent,
width: 1,
style: BorderStyle.solid)),
onSelected: (bool selected) {
setState(() {
_categorySelectedIndex = selected ? index : null;
widget.data.selectedIndex = index;
});
},
);
},
).toList(),
),
],
);
}
}
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有