Flutter基础之水平方向列表布局

在Flutter中,用ListView来显示列表项,其支持垂直和水平方向展示,通过过一个属性我们就可以控制其方向,列表有以下分类:

 

ListView组件属性及描述
属性名类型默认值说明
ScrollDirectionAxisAxis.vertical列表的排列方向,Axis.vertical为垂直方向,Axis.horizontal为水平方向
paddingEdgeInsetsGeometry 列表内部的空白区域,如果有child的话,child位于padding内部
reverseboolfalse组件排列反向
childrenList<Widget> 列表元素,注意List元素全部为Widget类型

示例代码如下:

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ListView Demo',
      home: new ListViewDemo(),
    );
  }
}

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text('ListView Dmoe'),
        leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
        actions: <Widget>[
          new IconButton(icon: Icon(Icons.search), onPressed: (){
            Fluttertoast.showToast(msg: '搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
          })
        ],
      ),
      body: new ListView(
//        padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
        padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
        children: <Widget>[
          //数据源  Icons.add_circle  图片资源
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('1'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('2'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('3'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('4'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('5'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('6'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('7'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('8'),),
          ListTile(leading: new Icon(Icons.add_circl),title: new Text('9'),),
          ListTile(leading: new Icon(Icons.add_circle),title: new Text('10'),),
        ],
      ),
    );
  }
}

比较简单的垂直方向的列表

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页