Flutter ListView.builder 对列表渲染的代码研究实现选中其中的item样式发生变化 ListTileTheme详解

最新推荐文章于 2024-08-23 18:24:46 发布

YunusQ

最新推荐文章于 2024-08-23 18:24:46 发布

阅读量2.2k

点赞数

分类专栏： flutter 文章标签：列表 java

本文链接：https://blog.csdn.net/youtiankeng/article/details/107826459

版权

flutter 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Flutter ListView.builder 对列表渲染的代码研究实现选中其中的item样式发生变化

理论部分

Listview.builer的源码部分

Listview.builer可以实现列表数据的渲染对网络请求获得的数据一般使用此种方式
核心代码就两行 itemCount确定数量 itemBuilder构造数据结构 index即为数据的索引值 context为上下文，可以理解为固定用法。

itemCount: this._provinceList.length,
itemBuilder: (context, index) {return Contair();}

 ListView.builder({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    @required IndexedWidgetBuilder itemBuilder,
    int itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  })

ListTileTheme的源码部分

重点介绍ListTileTheme 这部分网上的博客少之又少 ListTileTheme用在选中部分的样式修改上简单来说就是把ListTileTheme套在ListTile等子元素外部即可，然后修改选中样式即可。需要结合ListTile中的selected参数使用看下我的代码就能懂。

///  * [ListTileTheme], which defines visual properties for [ListTile]s.
  const ListTileTheme({
    Key key,
    this.dense = false,
    this.style = ListTileStyle.list,
    this.selectedColor,
    this.iconColor,
    this.textColor,
    this.contentPadding,
    Widget child,
  }) : super(key: key, child: child);

代码部分

int p;//选中的index
ListView.builder(
itemCount: this._provinceList.length,
  itemBuilder: (context, index) {
    return Container(
        decoration: new BoxDecoration(color: Color(0xffE8E9ED)),
        child: ListTileTheme(
          selectedColor:Colors.red,
          child: ListTile(
            selected: p==index?true:false,//重点部分
            onTap: () {
              if(mounted)
                setState(() {
                  p=index;
                }); 
            },
            title: Text(this._provinceList[index]['name']),
            contentPadding: EdgeInsets.symmetric(horizontal: 30.0),
          ),)
    );
  })