フラッターの研究ノート（12） - コンポーネントフラッタ研究ノートのリスト（13） - - コンポーネントのリストは、研究ノート（12）フラッターフォーム成分

転載の場合は、ソースを明記してください：フラッターの研究ノート（12） -コンポーネントのリストを

 日常製品プロジェクトの需要では、一般的にAndroidのアプローチで使用されるクラスのリストを表示する需要が、しばしばあり、その後、データソースを収集し、その後アダプタアダプタのリストを作成し、アダプターへのデータソースを渡し、表示データの最終的なリストですそれにフラッターでデータのリストをどのように扱いますか？

フラッターでは垂直方向と水平方向の表示をサポートしている項目のリストを表示するリストビューで、我々はその方向を制御することができますプロパティを超えることで、次のカテゴリのリストがあります：

　　1.リストレベル

　　2.垂直リスト

　　3.データの量が非常に大きなリストであります

　　4.リストの行列

• コンポーネントの垂直方向のリスト

そして、コンポーネントのプロパティは、リストビューを説明します

プロパティ名	タイプ	デフォルト値	説明
ScrollDirection	軸	Axis.vertical	リストの配列方向、Axis.vertical垂直方向、水平方向Axis.horizo​​ntal
パディング	EdgeInsetsGeometry		その後、子がある場合は、リスト内の空白領域、子パディングの内側に
逆	BOOL	偽	成分の逆配列
子供	一覧<ウィジェット>		リスト要素は、リストウィジェットタイプのすべての要素に注意を払います

 

 

 

 

 

 

 

 

次のようにサンプル・コードは次のとおりです。

インポート' パッケージ：フラッター/ material.dart ' ; 
インポート' パッケージ：fluttertoast / fluttertoast.dart ' ; 

ボイドメイン（）=> runApp（のDemoApp（））。

クラスのDemoAppはStatelessWidget {拡張
  @Override 
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    返す 新しいMaterialApp（ 
      ：タイトル' ListViewのデモ' 、
      自宅：新しい、ListViewDemoを（）
    ）; 
  } 
} 

クラスListViewDemoはStatelessWidget {延び
  @Overrideの
  {ウィジェットビルド（BuildContextコンテキスト）
    返す 新しい足場（
      アプリケーションバー：新しいアプリケーションバー（
        タイトル：テキスト（' リストビューDmoe ' ）、
        リード：新しいアイコン（Icons.menu、サイズ：40 、カラー：Colors.white、）、
        アクション： <ウィジェット> [
           新しいIconButton（アイコン：アイコン（Icons.search）は、onPressed：（）{ 
            Fluttertoast.showToast（MSG：' 点击了搜索按钮' 、toastLength：Toast.LENGTH_LONG、の、textColor：Colors.white、重力：ToastGravity.BOTTOM）; 
          }）
        ] 
      ） 、
      ボディ：新しいリストビュー（
//         パディング：新しい新しいEdgeInsets.symmetric（縦：10、横：10）、// パディング水平方向及び垂直方向のサブ要素設定する 
        パディングを：新しい新しい EdgeInsets.only（左：10、トップ：0、右：10、底部：0）、// パディングの下で左サブ要素のセット、上、右、の 
        子供：<ウィジェット> [
           // データソース 
          ListTile（リード：新新しいアイコン（Icons.add_circle_outline）、タイトル：新新しいテキスト（" 最初のデータ" ）、）、
          ListTile（先頭：新新しいアイコン（Icons.add_circle_outline）、タイトル：新新テキスト（' 第二のデータ' ）、）、
          ListTile（先頭：新新しいアイコン（Icons.add_circle_outline）、タイトル：新新しいテキスト（' 第三データ' ）、）、
          ListTile（先頭：新新しいアイコン（Icons.add_circle_outline）タイトル：新新しいテキスト（' 第4のデータ' ）、）、
          ListTile（先頭：新新しいアイコン（Icons.add_circle_outline）、タイトル：新新しいテキスト（' 第5のデータ' ）、）、
          ListTile（先頭：新しい新しいアイコン（ Icons.add_circle_outline）、タイトル：新新しいテキスト（' 条データ' ）、）、
          ListTile（先頭：新新しいアイコン（Icons.add_circle_outline）、タイトル：新新しいテキスト（' 条データ' ）、）、
          ListTile（先頭：新新しいアイコン（Icons.add_circle_outline）、タイトル：新しい新しいテキスト（' 記事データ' ）、）、
          ListTile（先頭：新新しいアイコン（Icons.add_circle_outline）、タイトル：新新しいテキスト（' IXデータ' ）、）、
          ListTile（先頭：新新しいアイコン（アイコン。 add_circle_outline）、タイトル：新新しいテキスト（"記事データX ' ））
        ] 
      ）
    ）; 
  } 
}

 

上記のリストは、単純な垂直方向、私は全体のListViewにパディング特性を作用する、方法のパディングを設定するために、2つのサブ要素を試みたデモは、単一のサブ要素が適用されないです。結果を添付スクリーンショット：

• コンポーネントのレベルリスト

次のようにサンプル・コードは次のとおりです。

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,
            ),
          ],
        ),
      ),
    );
  }
}

 

效果截图如下：

• 长列表组件

当列表的数据非常多时，需要使用长列表，比如淘宝后台的订单列表，手机通讯录等，这些列表项数据很多，长列表也是使用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);
              },
            );
          },
        ),
      ),
    );
  }
}

 

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

 

下一章节：Flutter学习笔记（13）--表单组件