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

ListView:

    ListView:参数
    scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表
    padding:内边距。
    resolve:组件反向排序
    children:List<Widget>   列表元素

垂直列表组件:

main.dart

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('flutter demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      //垂直列表:
      scrollDirection: Axis.vertical,
      children: <Widget>[
        ListTile(
          leading:
              Icon(Icons.settings, color: Colors.blue, size: 30), //前面的图标:
          title: Text('北京音乐学院', style: TextStyle(fontSize: 18)),
          subtitle: Text('子标题'),
          trailing: Icon(Icons.settings, color: Colors.yellow, size: 30),
        ),
        ListTile(
          leading:Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover), //前面的图标:
          title: Text('美国农民:对华贸易战已让我损失40万美元', style: TextStyle(fontSize: 18)),
          subtitle: Text('美国《新闻周刊》8月27日文章,原题:北达科他州农民表示,倘若特朗普不会因贸易战在其农场所在地区“失去100%”的支持,那么“人们就疯了”  那些在经济上遭受特朗普对华贸易政策重创的美国农民警告称,美国对华贸易战正使特朗普在其“农村票仓”失去大量支持,而正是来自农村的选票曾将他送进白宫。')
        ),
        Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 10,0,10),
          child: Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18
            ),
          ),
        ),
        Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover)
      ],
    
    );
  }
}

水平列表组件:

import 'package:flutter/material.dart';

/*
      ListView:参数
    scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表
    padding:内边距。
    resolve:组件反向排序
    children:List<Widget>   列表元素
*/

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

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

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 180,
      child: ListView(
        padding: EdgeInsets.all(10),
        //水平列表:
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.blue,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.blue,
          ),Container(
            width: 180.0,
            height: 180.0,
            color: Colors.red,
          ),
          Container(
            width: 180.0,
            height: 180.0,
            color: Colors.blue,
          )
        ],
      ),
    );
  }
}

转载于:https://www.cnblogs.com/yiweiyihang/p/11429485.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值