Flutter05-ListView 列表

最新推荐文章于 2023-08-28 17:18:35 发布

gaoya7305

最新推荐文章于 2023-08-28 17:18:35 发布

阅读量137

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/gaoya7305/article/details/106758685

版权

Flutter 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了在Flutter中创建垂直列表ListView、垂直图文列表和水平列表的方法。通过具体代码示例展示了如何使用ListTile构建带有标题、副标题和图标的列表项，以及如何组合图像和文本创建图文列表，最后演示了如何实现水平滚动的列表。

摘要由CSDN通过智能技术生成

垂直列表ListView
垂直图文列表
水平列表

一、垂直列表ListView

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        ListTile(

          title: Text(
            '华北黄淮高温持续 南方强降雨',
            style: TextStyle(
              fontSize: 24
            ),
          ),
          subtitle: Text('中国天气网讯'),
        ),

        ListTile(
          leading: Icon(Icons.settings),
          title:Text(
            '中国国家电网',
            style: TextStyle(fontSize: 24),
          ) ,
          subtitle: Text('21日开始，高温预警'),

        ),
        ListTile(
          leading: Icon(Icons.home),
          title:Text(
            '中国国家电网',
            style: TextStyle(fontSize: 24),
          ) ,
          subtitle: Text('21日开始，高温预警'),

        ),
        ListTile(
          leading: Image.network('http://qiniu.xingheaoyou.com/1.jpg'),
          title:Text(
            '中国国家电网',
            style: TextStyle(fontSize: 24),
          ) ,
          subtitle: Text('21日开始，高温预警'), //副标题
        )


      ],
    );

  }
}

效果图：
在这里插入图片描述

二、垂直图文列表

class HomeContent  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        Image.network("http://qiniu.xingheaoyou.com/1.jpg"),

        Container(
          child: Text(
              '我是一个标题',
              textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28
            ),

          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10)
        ),

        Image.network("http://qiniu.xingheaoyou.com/2.jpg"),
        Container(
            child: Text(
              '我是一个标题',
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 28
              ),

            ),
            height: 60,
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10)
        ),

        Image.network("http://qiniu.xingheaoyou.com/3.jpg"),
        Container(
            child: Text(
              '我是一个标题',
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 28
              ),

            ),
            height: 60,
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10)
        ),

        Image.network("http://qiniu.xingheaoyou.com/4.jpg"),
        Container(
            child: Text(
              '我是一个标题',
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 28
              ),

            ),
            height: 60,
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10)
        ),

        Image.network("http://qiniu.xingheaoyou.com/5.jpg"),

      ],
    );
  }
}

效果图
在这里插入图片描述

三、水平列表

class HomeContent  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 180,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180.0,
            color: Colors.red,
          ),

          Container(
            width: 180.0,
            color: Colors.green,
            child: ListView(
              children: <Widget>[
                Image.network('http://qiniu.xingheaoyou.com/2.jpg'),
                Text('我是一个文本')
              ],
            ),
          ),

          Container(
            width: 180.0,
            color: Colors.orange,
          ),

          Container(
            width: 180.0,
            color: Colors.blue,
          ),

        ],
      ),
    );

  }
}

效果图：
在这里插入图片描述