Flutter 横向滚动标签

截屏2021-01-18 08.40.13.png

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

代码语言：javascript复制

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复制

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(),
       ),
     ],
    );
  }
}

listview android

0 人点赞