专栏首页ios 技术积累Flutter ListView 自定义

Flutter ListView 自定义

屏幕快照 2019-09-19 17.31.54.png

一个简单我的页面,之前做过iOS的应该知道,TableView 可以设置section header,但是ListView没有区分Section和Row。ListView有ListTile,但是我还是自定义了一个

import 'package:flutter/material.dart';

class MineItemWidget extends StatelessWidget {
  String imageName;
  String title;
  @required VoidCallback onTap;

  MineItemWidget(this.imageName,this.title,{this.onTap});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 53,
            child: _mineItem(imageName, title),
          ),
          Container(
            color: Color(0xffeaeaea),
            constraints: BoxConstraints.expand(height: 1.0),
          ),
        ],
      )
    );
  }

  Widget _mineItem(String imageName,String title) {
    return InkWell(
      onTap: (){
        this.onTap();
      },
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              padding: EdgeInsets.only(left: 16),
              child: Image.asset(
                imageName,
                width: 30,
                height: 30,
              ),
            ),
          ),
          Expanded(
            flex: 6,
            child: Container(
              padding: EdgeInsets.only(left: 10),
              child: Text(
                title,
                style: TextStyle(fontSize: 16),
              ),

            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              child: Icon(
                Icons.keyboard_arrow_right,
                size: 20,
                color: Colors.grey,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('我的'),
          backgroundColor: Colors.deepOrange,
          elevation: 0, //去掉Appbar底部阴影
        ),
        body: ListView(
          children: <Widget>[
            MineHead(),
            _listViewLine, // 分割线
            MineItemWidget("images/tab_car_n.png","发布记录",onTap: (){
              print('发布记录');
            }),
            MineItemWidget("images/tab_car_n.png","车主认证",onTap: (){
              
            }),
            _listViewLine,
            MineItemWidget("images/tab_car_n.png","联系客服",onTap: (){
              
            }),
          ],
        ));
  }

// 分割线
  Widget get _listViewLine {
    return Container(
      color: Color(0xffeaeaea),
      height: 6,
    );
  }

如果使用ListView.builder初始化还需要根据index判断什么时候加在ListView中加分割线。所以使用上面这种方式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Swift Reusable开源库使用

    Reusable是一个在swift下使用的开源库。利用protocol extension结合泛型提供了一个优雅的方案来dequeueReusableCell。...

    赵哥窟
  • Flutter 沉浸式布局

    赵哥窟
  • iOSNSSet 和 NSArray的区别

    ●NSSet , NSMutableSet是无序的集合,在内存中存储方式是不连续的 ●通过anyObject来访问单个元素 ●遍历NSSet中的每个元素。...

    赵哥窟
  • SQL查询的高级应用

    简单的Transact-SQL查询只包括选择列表、FROM子句和WHERE子句。它们分别说明所查询列、查询的表或视图、以及搜索条件等。

    阳光岛主
  • 中科院计算所发布国产编程语言“木兰”,核心科技还是换皮 Python?

    1月15日,记者从中国科学院计算技术研究所(以下简称中科院计算所)计算机体系结构国家重点实验室获悉,由该实验室编译组主导研发的国产编程语言“木兰”正式发布。据中...

    杰哥的IT之旅
  • 常见排序算法的稳定性分析

    我们知道堆的结构是节点i的孩子为 2*i 和 2*i+1 节点,大顶堆要求父节点大于等于其 2 个子节点,小顶堆要求父节点小于等于其 2 个子节点。

    Leophen
  • Angular async pipe在html模板中的一个实际应用

    title$是消费cx-carousel的Component传入的Observable对象:

    Jerry Wang
  • 在 C++ 中,你甚至可以 b()()()(); ——介绍 ref qualifier

    在传统 C++ 中,成员函数通过 this 指针访问。可以处理所有需要左值的情况。

    春帆
  • Redis-KV数据库Java连接以及Jedis包的使用

    描述:Redis是一个开源的Key-Value数据缓存,和Memcached类似。现在基本上主流的语言都有客户端支持,比如java、C、C#、C++、php、N...

    WeiyiGeek
  • Jedis cluster集群初始化源码剖析

    在项目中我们经常使用spring-data-redis来操作Redis,它封装了Jedis客户端来与Redis服务器进行各种命令操作。由于最近用到了Redis ...

    九州暮云

扫码关注云+社区

领取腾讯云代金券