欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Flutter学习笔记(13)--表单组件

程序员文章站 2022-03-08 17:13:59
在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源传递到Adapter中,最终进行列表数据的展示,那么在Flutter中如何处理列表数据呢? 在Flutter中,用ListView来显示列表项,其支持垂直和水平方向... ......

如需转载,请注明出处:flutter学习笔记(12)--列表组件

 在日常的产品项目需求中,经常会有列表展示类的需求,在android中常用的做法是收集数据源,然后创建列表适配器adapter,将数据源传递到adapter中,最终进行列表数据的展示,那么在flutter中如何处理列表数据呢?

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

  1.水平的列表

  2.垂直的列表

  3.数据量非常大的列表

  4.矩阵式的列表

  • 垂直列表组件

listview组件属性及描述
属性名 类型 默认值 说明
scrolldirection axis axis.vertical 列表的排列方向,axis.vertical为垂直方向,axis.horizontal为水平方向
padding edgeinsetsgeometry   列表内部的空白区域,如果有child的话,child位于padding内部
reverse bool false 组件排列反向
children list<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>[
          //数据源
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第一条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第二条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第三条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第四条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第五条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第六条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第七条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第八条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第九条数据'),),
          listtile(leading: new icon(icons.add_circle_outline),title: new text('第十条数据'),),
        ],
      ),
    );
  }
}

 

上面就是一个简单了垂直方向的列表,demo里面我尝试了两种给子元素设置padding的方式,padding属性的会作用在整个listview上,单个的子元素是没有作用到的。附上一下效果截图:

Flutter学习笔记(13)--表单组件

  • 水平列表组件

示例代码如下:

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: container(
        height: 100,
        child: new listview(
          scrolldirection: axis.horizontal,
//        padding: new edgeinsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
          padding: new edgeinsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
          children: <widget>[
            //数据源
            container(
              width: 50,
              color: colors.blue,
            ),
            container(
              width: 50,
              color: colors.green,
            ),
            container(
              width: 50,
              color: colors.amberaccent,
            ),
            container(
              width: 50,
              color: colors.bluegrey,
            ),
          ],
        ),
      ),
    );
  }
}

 

效果截图如下:

Flutter学习笔记(13)--表单组件

  • 长列表组件

当列表的数据非常多时,需要使用长列表,比如淘宝后台的订单列表,手机通讯录等,这些列表项数据很多,长列表也是使用listview作为基础组件,只不过需要添加一个列表项构造器itembuilder。flutter的长列表组件其实相当于android中的recyclerview,它会自动为您回收列表元素。在创建listview.builder时,需要传入两个参数,一个列表的初始长度,一个itembuilder函数

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

void main() => runapp(demoapp());

class demoapp extends statelesswidget {

  //初始化数据源
  final list<string> items = new list<string>.generate(200, (i)=>"item $i";

  @override
  widget build(buildcontext context) {
    return materialapp(
      title: '长列表组件',
      debugshowcheckedmodebanner: false,
      home: new scaffold(
        appbar: new appbar(
          title: text('长列表组件'),
          leading: icon(icons.menu,size: 30,color: colors.white,),
          actions: <widget>[
            new iconbutton(icon: icon(icons.search), onpressed: null)
          ],
        ),
        body: new listview.builder(
          itemcount: items.length,
      //列表构造器 itembuilder: (context,index){ return new listtile( leading: icon(icons.add_circle), title: new text('${items[index]}'), ontap: (){//给每一个item增加点击事件 fluttertoast.showtoast( msg: '${items[index]}'+'被点击了', toastlength: toast.length_short, gravity: toastgravity.bottom, textcolor: colors.white); }, ); }, ), ), ); } }

 

Flutter学习笔记(13)--表单组件

上面的代码,实现了当数据源比较多时的处理办法,而且给每一个item增加了点击事件ontap()。

 

下一章节:flutter学习笔记(13)--表单组件