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，但是我还是自定义了一个

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中加分割线。所以使用上面这种方式。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.09.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

listview