Flutter - ListView class

Flutter 的 ListView 元件是一具備捲軸的元件且能用來顯示多筆內容的元件。

其建構子如下：

ListView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, double itemExtent, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, List<Widget> children: const [] })
ListView.builder({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, double itemExtent, @required IndexedWidgetBuilder itemBuilder, int itemCount, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true })
ListView.custom({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, double itemExtent, @required SliverChildDelegate childrenDelegate })

屬性如下：

NameTypeDescription
childrenDelegateSliverChildDelegateA delegate that provides the children for the ListView.
itemExtentdoubleIf non-null, forces the children to have the given extent in the scroll direction.
controllerScrollControllerAn object that can be used to control the position to which this scroll view is scrolled.
hashCodeintThe hash code for this object.
keyKeyControls how one widget replaces another widget in the tree.
paddingEdgeInsetsGeometryThe amount of space by which to inset the children.
physicsScrollPhysicsHow the scroll view should respond to user input.
primaryboolWhether this is the primary scroll view associated with the parent PrimaryScrollController.
reverseboolWhether the scroll view scrolls in the reading direction.
runtimeTypeTypeA representation of the runtime type of the object.
scrollDirectionAxisThe axis along which the scroll view scrolls.
shrinkWrapboolWhether the extent of the scroll view in the scrollDirection should be determined by the contents being viewed.

方法如下：

NameReturn TypeDescription
buildChildLayout(BuildContext context)WidgetSubclasses should override this method to build the layout model.
debugFillProperties(DiagnosticPropertiesBuilder properties)void
build(BuildContext context)WidgetDescribes the part of the user interface represented by this widget.
buildSlivers(BuildContext context)ListBuild the list of widgets to place inside the viewport.
buildViewport(BuildContext context, ViewportOffset offset, AxisDirection axisDirection, List slivers)WidgetBuild the viewport.
createElement()StatelessElementCreates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren()ListReturns a list of DiagnosticsNode objects describing this node’s children.
getDirection(BuildContext context)AxisDirectionReturns the AxisDirection in which the scroll view scrolls.
noSuchMethod(Invocation invocation)dynamicInvoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style })DiagnosticsNodeReturns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a one-line detailed description of the object.
toStringShort()StringA short, textual description of this widget.

使用上可以直接建立 ListView 元件，並透過 children 屬性直接帶入 ListView 內要呈現的內容，用 padding 屬性設定內容與內容間的間隔。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new ListView(
    padding: const EdgeInsets.all(20.0),
    children: <Widget>[
      new Card(
        child: const Text('1. one')
      ),
      new Card(
        child: const Text('2. two')
      ),
      new Card(
        child: const Text('3. three')
      )
    ],
  )));
}

1.png

2.png

也可以建立 ListView.builder，設定 itemCount 屬性指定 ListView 內的內容數，並設定 itemBuilder 屬性指定 ListView 內的內容要怎樣呈現。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new ListView.builder(
        shrinkWrap: true,
    padding: new EdgeInsets.all(20.0),
    itemCount: 3.toInt(),
    itemBuilder: (BuildContext context, int index) {
      return new Card
      (
        child: new Text(index.toString() + '. Element' + index.toString())
      );
    },
  )));
}

3.png