flutter Wrap+Chip

小蜜蜂嗡嗡

于 2023-02-21 17:35:18 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/androidhyf/article/details/129146900

这篇文章展示了如何在Flutter应用中使用Wrap组件来排列Chip元素，通过设置crossAxisAlignment和alignment属性调整布局，用GestureDetector处理点击事件，并动态改变选中状态的颜色。spacing和runSpacing控制元素间距，httpImageList函数可能用于加载图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Wrap(
      crossAxisAlignment: WrapCrossAlignment.start,
      alignment: WrapAlignment.start,
      spacing: 20.w,
      runSpacing: 20.w,
      children: List.generate(_buttonList.length ?? 0, (index) {
        return GestureDetector(
          child: Chip(label: Text('${_buttonList[index]}',style: TextStyle(fontSize: setFontSize(28),color: _selectPosition==index?JadeColors.blue_2:JadeColors.grey),),
          backgroundColor: _selectPosition==index?JadeColors.lightBlue:JadeColors.lightGrey,),
          onTap: () {
            _selectPosition = index;
            _httpImageList();
            setState(() {});
          },
        );
      }),
    )