Flutter-ListView(UITableView)

Flutter

ListView列表视图,类似iOS中的UITableView,使用更加方便和个性化,里面children视图可以是任意的Widge

void main() => runApp(WudanTableViewPage());
class WudanTableViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Class Name',
      home: Scaffold(
        appBar: AppBar(title: Text('UITableView')),
        body: Center(
          child: ListView(
            scrollDirection: Axis.vertical, // 滚动方向
            children: <Widget>[
              new ListTile(
                title: Text("标题"),
                subtitle: Text("副标题"),
                leading: Icon(Icons.add_box),// 左边Widge
                trailing: Icon(Icons.airline_seat_flat), // 右边Widge
                isThreeLine: true, // 是否默认3行高度,subtitle不为空时才能使用
                dense: false, // 设置为true后字体变小
                selected: false, // 展示是否默认显示选中
              ),
              new Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554110093883&di=9db9b92f1e6ee0396b574a093cc987d6&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20%2F151%2Fw2048h1303%2F20180429%2F37c0-fzvpatr1915813.jpg",
                height: 60,
                fit: BoxFit.fitWidth,
              ),
              new Container(
                margin: EdgeInsets.all(10),
                color: Colors.orange,
                height: 100,
              )
            ],
          ),
        ),
      ),
    );
  }
}

属性介绍

  • padding:内边距
  • scrollDirection:滚动方向
示例图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容