Flutter ListView基础列表组件、水平列表组件、图标组件

最新推荐文章于 2021-06-04 06:07:42 发布
最新推荐文章于 2021-06-04 06:07:42 发布
阅读量213 收藏
点赞数
分类专栏： 前端 Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daxia_ke/article/details/106458595
版权

组件基础列表

  return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[

          ListTile(
              title: Text(
                '华北黄淮高温持续 南方强降雨今起强势登场',
                style: TextStyle(
                  fontSize: 24
                ),
              ),
              subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
          ),
           ListTile(
              title: Text('中国13家运营波音737MAX航空公司均已提出索赔场',
                style: TextStyle(
                  fontSize: 24
                ),),
              subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
          ),
           ListTile(
              title: Text('华中国13家运营波音737MAX航空公司均已提出索赔登场'),
              subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
          ),
           ListTile(
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
          ),

      ],
    );

水平组件带标题

return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[

         
          ListTile(
              leading:Icon(Icons.settings,size:40),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(              
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
              trailing:Icon(Icons.home),
          ),
          ListTile(
              leading:Icon(Icons.pages),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(
              leading:Icon(Icons.settings),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(
              leading:Icon(Icons.home,color: Colors.yellow,),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(
              leading:Icon(Icons.pages),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          )
          
      ],
    );

图标组件

return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
         
          ListTile(
              leading:Image.network("https://www.itying.com/images/flutter/1.png"),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
            ListTile(
              leading:Image.network("https://www.itying.com/images/flutter/2.png"),
              title: Text('保监局50天开32罚单 “断供”违规资金为房市降温'),
              subtitle: Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降温"),
          ),
          ListTile(
             
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
              trailing:Image.network("https://www.itying.com/images/flutter/2.png")
          ),
          ListTile(              
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
              trailing:Icon(Icons.home),
          ),
          ListTile(
              leading:Icon(Icons.pages),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(
              leading:Icon(Icons.settings),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(
              leading:Icon(Icons.home,color: Colors.yellow,),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(
              leading:Icon(Icons.pages),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          )
          
      ],
    );

列表组件带图标和图

 return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
          Image.network("https://www.itying.com/images/flutter/1.png"),

          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/2.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/3.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/4.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/1.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/2.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/3.png"),
          Container(
            child: Text(
                '我是一个标题',
                textAlign: TextAlign.center, 
                style: TextStyle(
                  fontSize: 28,
                ),            
            ),
            height: 60,
            padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          ),

          Image.network("https://www.itying.com/images/flutter/1.png"),
          Image.network("https://www.itying.com/images/flutter/2.png"),
          Image.network("https://www.itying.com/images/flutter/3.png"),

      ],
    );
daxia_ke
关注
专栏目录
Flutter中ListView 垂直列表组件、水平列表组件
越陌度阡
12-17 1426
列表布局是项目开发中最常用的一种布局方式，Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。 ListView常见的参数列表： 1.scrollDirection 列表方向。值的类型为 Axis，主要有以下两种： (1). Axis.horizontal 水平列表； (2). Axis.vertical 垂直列表； 2.padding内边距。值的类型为EdgeInsets，如：EdgeInsets.all()； 3.reverse反向排序。值的类......
Flutter ListView （动态）列表组件、水平列表组件、图标组件详解
小青蛙的博客
02-25 2000
Flutter ListView （动态）列表组件、水平列表组件、图标组件 Flutter ListView 基础列表组件、水平列表组件、图标组件 列表常见的几种情况： 垂直列表 垂直图文列表 横向列表 动态列表 ListView组件常用的参数： scrollDirection: Axis, Axis.horizontal 横向列表 Axis.vertical 垂直列表(默认垂直列表) p...
Flutter入门学习--(9)横向列表组件ListView
游响云停专栏
01-22 7690
  ListView可以纵向显示也可以横向显示，使用scrollDirection属性控制，效果图如下   import 'package:flutter/material.dart'; void main() =&gt; runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root...
Flutter 学习笔记 《九》 ListView 列表组件简介
dsrpt17的专栏
05-04 513
一、ListView的声明 import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return Material...
direction 属性
包磊磊的博客
05-07 2019
CSS2 direction 属性 说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 语法： direction：ltr | rtl 默认值：ltr 取值： ltr： 文本流从左到右。 rtl： 文本流从右到左。 说明： 检索或设置文本流的方向。 假如您想...
css的direction属性
Focus-Fe
10-11 246
关于这个属性，今天在http://static.youku.com/v1.0.0704/index/css/youku.css 优酷上面看视频的时候无意看到的，觉得还是说一下，虽然可能有的同学觉得不常用了。     /*element*/ html{direction:ltr;*overflow-y:scroll;}     direction 属性规定文本的方向/书写方向,以及针对...
Flutter ListView基础列表组件、水平列表组件、图标组件、ListView动态列表组件 以及循环动态数据.zip
最新发布
06-03
这个压缩包文件包含的内容主要是关于Flutter中的ListView组件及其相关扩展，旨在帮助开发者深入理解和运用这些组件来构建用户界面。以下是对这些组件的详细介绍： 1. **ListView基础列表组件**：ListView是Flutter...
Flutter列表组件ListView
01-20
本篇文章将深入探讨Flutter中的列表组件ListView及其基本使用方法。 首先，我们需要导入必要的库，这通常包括`package:flutter/material.dart`，因为它包含了大部分的基础组件和样式。在示例代码中，可以看到这样的...
Flutter常用组件-ListView 列表组件
粉丝交流群：569545109
05-12 307
一、ListView 列表组件简介 列表组件也是一个经常使用的组件。在看ListView组件之前先了解一下ListTile组件。 1、ListTile(列表瓦片)组件 ListTile通常用于填充 ListView。 /** * ListTile组件 */ class ListTileWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ListTile.
html5 文字向下滚动,HTML5实现文字滚动
weixin_33488239的博客
06-04 1747
充值公告：首充100送1元1.滚动方向属性 direction该属性的滚动方向可以设置四个值:up(文字向上)、down(文字向下)、left(文字向左)、right(文字向右)。2.滚动方式属性 behavior该属性的取值有三个值：scroll(循环滚动，默认效果)、slide(只滚动一次就停止)、alternate(来回交替进行滚动)3.滚动速度属性 scrollamount该属性能调整文字...
Scroll详解
cicistream
03-06 3195
➡️ = 只读 ↔️ = 可读可写（默认） Element clientHeight ➡️ clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算. scrollHeight ➡️ 一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。 包括元素的padding，但不包括元素的border和margin。scrol
ListView组件（属性设置）
penjie0418的专栏
01-06 439
procedure TMyForm.FormCreate(Sender: TObject); var   Group: TListGroup;   Item: TListItem;   s1, s2: string; begin //以下属性可以在属性窗口中手动设置，也可以动态设置   ListView1.ViewStyle := vsReport;    ListView1.Gr
Flutter基础学习 7-19 ListView 横向列表的使用
dpl12的博客
06-14 2034
前面已经对ListView有了清楚的认识，也做出了普通的纵向（竖向列表）。这里我们看看横向列表如何使用。其实还是使用我们的ListView组件，只是在ListView组件里加一个ScrollDirection属性。 话不多说，Demo源码如下： import 'package:flutter/material.dart'; //主函数（入口函数） void main() { ...
flutter-基础组件学习
韩亚军的博客
10-22 553
flutter study 基础组件 Text Widget import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { ...
window.scroll 浏览器滚动条的参数总结..........
zxl_love
01-12 2964
<br />网页代码常用小技巧总结<br />     <br /><meta http-equiv="Content-Type" content="text/html; charset=big5" /><br /><title>02-06PORTFOLIO COLLECTION</title><br />function openWin(str, w, h) {<br />  window.open(str,'sixWindow','toolbar=no,location=no,directories=n
FlutterListView组件属性详解
怀旧的老张 的博客
09-18 1067
FlutterListView相关属性 ListView.builder({ //listView 常用 属性 Key key, Axis scrollDirection = Axis.vertical,//滚动方向 bool reverse = false, ScrollController controller, // 滚动控制 主要是控制滚动位置和监听滚动事件 //primary 为true时 controller 必须为null，也就是不用穿参...
如何在 Flutter 上创建一个水平滑动的列表
Flutter 社区
08-21 2225
有时，你可能想要创建一个水平滑动（而不是竖直滑动）的列表。ListViewwidget 本身就支持水平列表的创建。我们将会使用标准的ListView构造方法，通过指...
Flutter入门之ListView横向列表
weimeig的博客
09-16 8048
制作横向列表 这个我们先来看效果，然后再具体讲解使用方法: import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ ...
JS - scroll属性
堇年
10-05 2450
scrollWidth / scrollHeight 内容没有超出元素范围时 scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth; scrollHeight: = 元素高度 + 内边距的高度 == clientHeight; 内容超出元素范围时 scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度 scrollHeight: = 元素高度 + 内...
Flutter ListView详解与基本用法
Flutter的ListView组件为开发者提供了一种灵活的方式来展示大量数据，同时，通过结合其他的组件如AppBar、ListTile等，可以快速构建出美观且功能丰富的用户界面。在实际开发中，还可以根据需求添加更多的功能，比如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值