前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter ListView 自定义

Flutter ListView 自定义

作者头像
赵哥窟
发布2019-09-20 16:59:47
3.7K0
发布2019-09-20 16:59:47
举报
文章被收录于专栏:日常技术分享

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

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

代码语言:javascript
复制
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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
代码语言:javascript
复制
  @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中加分割线。所以使用上面这种方式。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.09.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档