Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter 横向滚动标签

Flutter 横向滚动标签

作者头像
赵哥窟
发布于 2021-01-20 04:05:33
发布于 2021-01-20 04:05:33
2.4K00
代码可运行
举报
文章被收录于专栏:日常技术分享日常技术分享
运行总次数:0
代码可运行

截屏2021-01-18 08.40.13.png

要实现上面的效果,每个种类的标签横向滚动,实现的方式,最外层的大分类标签一个ListView,每个分类的标签也是ListView 设置横向滚动结合Wrap组件就能实现。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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,
    ),
  );
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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(),
       ),
     ],
    );
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Flutter实战】自定义滚动条
魏文帝曹丕(187年-226年6月29日),字子桓,沛国谯县(今属安徽亳州)人。三国时期曹魏开国皇帝,曹操和卞夫人的嫡长子,之后继承父亲的魏王封号与丞相的大权,最终东汉皇帝汉献帝禅让于其,曹丕登基后改国号为魏,史称曹魏,226年驾崩,谥文皇帝。
老孟Flutter
2020/09/11
2.4K0
【Flutter实战】自定义滚动条
Flutter性能调优、复杂业务保证Flutter的高性能高流畅
高性能高流畅度一直是Flutter团队宣传的一大亮点,也是当初选择Flutter的重要因素之一,但是随着复杂业务的应用落地,通过Flutter页面和原生页面滑动流畅度对比,我们开始产生怀疑,因为部分Flutter页面流畅度明显低于Native,是Flutter的宣传言过其实还是我们开发人员使用姿势有问题,今天我们就来具体分析下。
码农笔录
2020/08/24
1.3K0
Flutter性能调优、复杂业务保证Flutter的高性能高流畅
2025实战-Flutter3.27仿携程app实例|flutter3.x酒店预订
2025開年原创新作Flutter3.27+Dart3.6跨平台仿携程/飞猪旅行酒店app预订系统。
andy2018
2025/02/22
1380
2025实战-Flutter3.27仿携程app实例|flutter3.x酒店预订
Flutter | 常用组件分类、概述、实战
AppBar(title属性,Text组件; action:动作响应;!!!! titleSpacing:标题文字间距; toolbarOpacity:标题透明度;)
凌川江雪
2020/06/16
4.3K0
Flutter 意见输入框
在我们输入文本之后下面的输入字数会变,可能马上你会想到使用setState不就完了嘛!....可是Dialog 并没有setState方法
赵哥窟
2021/03/02
2K0
Flutter 意见输入框
Flutter | 使用 InkResponse和 InkWell组件 实现事件操作
InkResponse 和 InkWell 内部使用了Ink; 可以包裹 不具备事件处理的组件,实现水波纹等点击事件的效果; InkWell 水波纹限制在文本组件之内; InkResponse 水波
凌川江雪
2020/07/07
2K0
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套
这次的 Flutter 小技巧是 ListView 和 PageView 的花式嵌套,不同 Scrollable 的嵌套冲突问题相信大家不会陌生,今天就通过 ListView 和 PageView 的三种嵌套模式带大家收获一些不一样的小技巧。
GSYTech
2022/07/04
2.2K0
Flutter 构建完整应用手册-列表 顶
显示数据列表是移动应用程序的基本模式。 Flutter包含ListView部件,使列表变得轻而易举!
南郭先生
2018/08/14
2.7K0
Flutter 构建完整应用手册-列表
                                                    顶
自研flutter3.x实战仿抖音app短视频直播FlutterLive
flutter3.x_douyin基于flutter3+dart3+getx+meidaKit等技术开发抖音版app视频直播项目。
andy2018
2024/03/25
1K0
【-Flutter 探索-】AutomaticKeepAliveClientMixin 保持 State 状态
@张风捷特烈 2020.12.18 未允禁转 我的公众号:编程之王 联系我---- ~ END ~
张风捷特烈
2020/12/21
2.2K0
【-Flutter 探索-】AutomaticKeepAliveClientMixin 保持 State 状态
【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动的菜单栏
和尚发现在长期未登陆小米应用市场时,再次登陆会有可滑动的半屏底部菜单,供用户方便下载和推广;而在 Flutter 中这个半屏底部菜单并不是一个简单的 BottomSheet 完成的,可以通过 DraggableScrollableSheet 根据手势操作滑动固定位的菜单栏完成;和尚简单学习一下;
阿策小和尚
2021/07/05
1.5K0
【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动的菜单栏
[- Flutter 数据&状态篇 -] setState
0.1:对我而言,一个产品有四层境界 1.造都造不出来 2.它又不是不能用 <---- 3.用的时候大家都不说话 4.如丝般顺滑,易拓展,易修改,易复用 0.2:要说的话 注意:本篇是对状态
张风捷特烈
2020/04/30
1.4K0
[- Flutter 数据&状态篇 -] setState
Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展
【pushAndRemoveUntil与pushNamedAndRemoveUntil区别】
凌川江雪
2020/06/29
3.9K0
Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展
Flutter开发-可滚动组件
当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误。
码客说
2020/05/14
4.7K0
Flutter开发-可滚动组件
Flutter 首页必用组件NestedScrollView
老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本,建议慎重,有些人升级后项目无法运行。
老孟Flutter
2020/09/11
4.4K0
Flutter第7天--字体图标+综合小案例+Android代码交互
Flutter七日游第七天:2018-12-22 天气:雨-阴 零、前言 最后一天了,今天将把前六天的零碎知识整合起来,以及未涉及的零碎知识 最后会附上源码,在github,我按天分包稍微整理了一下,顺手Star一下吧 顺便提一下:Dart语法的相关测试在test包的base里(怕你们找不到) 与Android代码交互后感觉flutter还是蛮可以的,可惜没条件玩ios,不然岂不是可以通杀 (给我七天或许可以把ios跑一圈,以后有钱再说吧) 留图镇楼:分类效果和查询效果 - - ---
张风捷特烈
2018/12/28
2.4K0
flutter中对列表的性能优化
下面是一些使用ListView对象呈现列表列表的代码,内部列表的shrinkWrap值设置为 true。shrinkWrap强行评估整个内部列表,允许它请求有限的高度,而不是通常的ListView对象高度,即无穷大!
徐建国
2021/11/30
3.7K0
flutter中对列表的性能优化
Flutter Column嵌套Listview不能滚动的问题
如果做这个筛选界面的时候,刚开始最外层用Column嵌套一个Container(红色部分)和ListView。 然后每个Item也是Column嵌套一个Container(大分类) 和GridView(小分类) 。出现的问题就是不能滚动。
赵哥窟
2021/04/20
3.5K0
Flutter Column嵌套Listview不能滚动的问题
如何提高Flutter应用程序的性能
在调用 setState() 方法重建组件时,一定要最小化重建组件,没有变化的组件不要重建,看下面的Demo,这是一个设置页面,
老孟Flutter
2021/01/28
1.6K0
Flutter | 滚动组件,ListView,GridVIew等
当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局;
345
2022/02/11
8.8K0
Flutter | 滚动组件,ListView,GridVIew等
推荐阅读
相关推荐
【Flutter实战】自定义滚动条
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验