【Flutter学习】基本组件之基本列表Gradview组件

一，概述　　

数据量很大的时用矩阵方式排列比较清晰，此时用网格列表组件，即为GridView组件，可实现多行多列的应用场景。 使用GridView创建网格列表有多种方式：

  • GridView.count 通过单行展示个数创建GridView。
  • GridView.extend通过最大宽度创建GridView。

二，构造函数　　

  • GridView

    • 使用场景：使用自定义SliverGridDelegate创建可滚动的2D小部件数组
    • 构造函数

      GridView({Key key,   Axis scrollDirection: Axis.vertical,   bool reverse: false,
  ScrollController controller, bool primary,
  ScrollPhysics physics, bool shrinkWrap: false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate,
  bool addAutomaticKeepAlives: true,
  bool addRepaintBoundaries: true,
  bool addSemanticIndexes: true,
  double cacheExtent, List<Widget> children: const [],
  int semanticChildCount })

  • GridView.count

    • 使用场景：创建一个可滚动的2D小部件数组，在横轴上具有固定数量的网格块
    • 构造函数

      GridView.count({Key key, Axis scrollDirection: Axis.vertical,
　　bool reverse: false, ScrollController controller,
　　bool primary, ScrollPhysics physics, bool shrinkWrap: false,
　　EdgeInsetsGeometry padding, @required int crossAxisCount,
 　double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0,
   double childAspectRatio: 1.0, bool addAutomaticKeepAlives: true,
   bool addRepaintBoundaries: true,
   bool addSemanticIndexes: true,
   double cacheExtent, List<Widget> children: const [],
   int semanticChildCount })
    • 分析和使用

      Widget gridViewDefaultCount(List<BaseBean> list) {
    return GridView.count(
//      padding: EdgeInsets.all(5.0),
      //一行多少个
      crossAxisCount: 5,
      //滚动方向
      scrollDirection: Axis.vertical,
      // 左右间隔
      crossAxisSpacing: 10.0,
      // 上下间隔
      mainAxisSpacing: 10.0,
      //宽高比
      childAspectRatio: 2 / 5,

      children: initListWidget(list),
    );
  }

List<Widget> initListWidget(List<BaseBean> list) {
    List<Widget> lists = [];
    for (var item in list) {
      lists.add(new Container(
        height: 50.0,
        width: 50.0,
        color: Colors.yellow,
        child: new Center(
            child: new Text(
          item.age.toString(),
        )),
      ));
    }
    return lists;
  }

  • GridView.extent

    • 使用场景：使用每个都具有最大横轴范围的 网格块 创建可滚动的2D小部件数组。
    • 构造函数

      GridView.extent({Key key, Axis scrollDirection: Axis.vertical,
   bool reverse: false, ScrollController controller,
   bool primary, ScrollPhysics physics,
   bool shrinkWrap: false, EdgeInsetsGeometry padding,
   @required double maxCrossAxisExtent,
   double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0,
   double childAspectRatio: 1.0,
   bool addAutomaticKeepAlives: true,
   bool addRepaintBoundaries: true,
   bool addSemanticIndexes: true,
   List<Widget> children: const [],
   int semanticChildCount })
    • 分析和使用　　

      ///GridView.extent 允许您指定项的最大像素宽度
  Widget gridViewDefaultExtent(List<BaseBean> list) {
    return GridView.extent(
      ///设置item的最大像素宽度  比如 130
      maxCrossAxisExtent: 130.0,
      ///其他属性和count一样
      children: initListWidget(list),
    );
  }

  • GridView.builder

    • 使用场景：创建按需创建的可滚动的2D小部件数组
    • 构造函数

      GridView.builder({Key key, Axis scrollDirection: Axis.vertical,
 　　bool reverse: false, ScrollController controller,
    bool primary, ScrollPhysics physics,
    bool shrinkWrap: false, EdgeInsetsGeometry padding,
    @required SliverGridDelegate gridDelegate,
    @required IndexedWidgetBuilder itemBuilder,
    int itemCount, bool addAutomaticKeepAlives: true,
    bool addRepaintBoundaries: true,
    bool addSemanticIndexes: true,
    double cacheExtent, int semanticChildCount })
    • 分析和使用

      ///GridView.builder  可以定义gridDelegate的模式
  Widget gridViewDefaultBuilder(List<BaseBean> list) {
    return GridView.builder(
        gridDelegate: MyGridViewDefaultCustom(
          crossAxisCount: 2,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 1.0,
        ),
        itemBuilder: (context, i) => new Container(
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  new Text(
                    "${list[i].name}",
                    style: new TextStyle(fontSize: 18.0, color: Colors.red),
                  ),
                  new Text(
                    "${list[i].age}",
                    style: new TextStyle(fontSize: 18.0, color: Colors.green),
                  ),
                  new Text(
                    "${list[i].content}",
                    style: new TextStyle(fontSize: 18.0, color: Colors.blue),
                  ),
                ],
              ),
         ));
  }
      ///自定义SliverGridDelegate
class MyGridViewDefaultCustom extends SliverGridDelegate {
  ///横轴上的子节点数。  一行多少个child
  final int crossAxisCount;

  ///沿主轴的每个子节点之间的逻辑像素数。 默认垂直方向的子child间距  这里的是主轴方向 当你改变 scrollDirection: Axis.vertical,就是改变了主轴发方向
  final double mainAxisSpacing;

  ///沿横轴的每个子节点之间的逻辑像素数。默认水平方向的子child间距
  final double crossAxisSpacing;

  ///每个孩子的横轴与主轴范围的比率。 child的宽高比  常用来处理child的适配
  final double childAspectRatio;

  bool _debugAssertIsValid() {
    assert(mainAxisSpacing >= 0.0);
    assert(crossAxisSpacing >= 0.0);
    assert(childAspectRatio > 0.0);
    return true;
  }

  const MyGridViewDefaultCustom({
    @required this.crossAxisCount,
    this.mainAxisSpacing = 0.0,
    this.crossAxisSpacing = 0.0,
    this.childAspectRatio = 1.0,
  })  : assert(crossAxisCount != null && crossAxisCount > 0),
        assert(mainAxisSpacing != null && mainAxisSpacing >= 0),
        assert(crossAxisSpacing != null && crossAxisSpacing >= 0),
        assert(childAspectRatio != null && childAspectRatio > 0);

  ///  返回值有关网格中图块大小和位置的信息。这里就是处理怎么摆放 我们可以自己定义
  ///   SliverGridLayout是抽象类  SliverGridRegularTileLayout继承于SliverGridLayout是抽象类
  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    // TODO: implement getLayout
    assert(_debugAssertIsValid());

    ///对参数的修饰 自定义
    final double usableCrossAxisExtent =
        constraints.crossAxisExtent - crossAxisSpacing * (crossAxisCount - 1);
    final double childCrossAxisExtent = usableCrossAxisExtent / crossAxisCount;
    final double childMainAxisExtent = childCrossAxisExtent / childAspectRatio;
    return MySliverGridLayout(
      crossAxisCount: crossAxisCount,
      mainAxisStride: childMainAxisExtent + mainAxisSpacing,
      crossAxisStride: childCrossAxisExtent + crossAxisSpacing,
      childMainAxisExtent: childMainAxisExtent,
      childCrossAxisExtent: childCrossAxisExtent,
      reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),
    );
  }

  /// 和ListView的 shouldRebuild 作用一样   之前的实例和新进来的实例是相同的就返回true
  @override
  bool shouldRelayout(SliverGridDelegate oldDelegate) {
    // TODO: implement shouldRelayout
    return true;
  }
}

  • GridView.custom　

    • 使用场景：使用自定义SliverGridDelegate和自定义SliverChildDelegate创建可滚动的2D小部件数组
    • 构造函数

      GridView.custom({Key key, Axis scrollDirection: Axis.vertical,
  bool reverse: false, ScrollController controller,
  bool primary, ScrollPhysics physics,
  bool shrinkWrap: false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate,
  @required SliverChildDelegate childrenDelegate,
  double cacheExtent,
  int semanticChildCount })
    • 分析和使用　　

       ///GridView.custom 就是自己定制规则
  /// 这里说一下 GridView.count gridDelegate 其实就是内部实现 SliverGridDelegateWithFixedCrossAxisCount
  /// GridView.extent gridDelegate 其实就是内部实现 SliverGridDelegateWithMaxCrossAxisExtent
  Widget gridViewDefaultCustom(List<BaseBean> list) {
    return GridView.custom(
      gridDelegate: MyGridViewDefaultCustom(
        crossAxisCount: 2,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 1.0,
      ),
      childrenDelegate: MyGridChildrenDelegate(
        (BuildContext context, int i) {
          return new Container(
              child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Text(
                "${list[i].name}",
                style: new TextStyle(fontSize: 18.0, color: Colors.red),
              ),
              new Text(
                "${list[i].age}",
                style: new TextStyle(fontSize: 18.0, color: Colors.green),
              ),
              new Text(
                "${list[i].content}",
                style: new TextStyle(fontSize: 18.0, color: Colors.blue),
              ),
            ],
          ));
        },
        childCount: list.length,
      ),
    );
  }
      /**
 * 继承SliverChildBuilderDelegate  可以对列表的监听
 */
class MyGridChildrenDelegate extends SliverChildBuilderDelegate {
  MyGridChildrenDelegate(
    Widget Function(BuildContext, int) builder, {
    int childCount,
    bool addAutomaticKeepAlive = true,
    bool addRepaintBoundaries = true,
  }) : super(builder,
            childCount: childCount,
            addAutomaticKeepAlives: addAutomaticKeepAlive,
            addRepaintBoundaries: addRepaintBoundaries);

  ///监听 在可见的列表中 显示的第一个位置和最后一个位置
  @override
  void didFinishLayout(int firstIndex, int lastIndex) {
    print(‘firstIndex: $firstIndex, lastIndex: $lastIndex‘);
  }

  ///可不重写 重写不能为null  默认是true  添加进来的实例与之前的实例是否相同 相同返回true 反之false
  ///listView 暂时没有看到应用场景 源码中使用在 SliverFillViewport 中
  @override
  bool shouldRebuild(SliverChildBuilderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    print("oldDelegate$oldDelegate");
    return super.shouldRebuild(oldDelegate);
  }
}

三，参数详解

  • gridDelegate：

　　　构造 GridView 的委托者，GridView.count 就相当于指定 gridDelegate 为 SliverGridDelegateWithFixedCrossAxisCount，GridView.extent 就相当于指定 gridDelegate 为 SliverGridDelegateWithMaxCrossAxisExtent，它们相当于对普通构造方法的一种封装。它的值是一个 SliverGridDelegate 对象，参考 2.1 SliverGridDelegate。

  • cacheExtent：同 ListView，预加载的区域。
  • controller：同 ListView，滑动监听，值为一个 ScrollController 对象，这个属性应该可以用来做下拉刷新和上垃加载，后面详细研究。
  • padding：同 ListView，整个 GridView 的内间距。
  • physics：同 ListView，设置 GridView 如何响应用户的滑动行为，值为一个 ScrollPhysics 对象，它的实现类常用的有：
    • AlwaysScrollableScrollPhysics：总是可以滑动。
    • NeverScrollableScrollPhysics：禁止滚动。
    • BouncingScrollPhysics：内容超过一屏，上拉有回弹效果。
    • ClampingScrollPhysics：包裹内容，不会有回弹，感觉跟 AlwaysScrollableScrollPhysics 差不多。
  • reverse：Item 的顺序是否反转，若为 true 则反转，这个翻转只是行翻转，即第一行变成最后一行，但是每一行中的子组件还是从左往右摆放的，用到该属性的开发情景较少。
  • scrollDirection：GirdView 的方向，为 Axis.vertical 表示纵向，为 Axis.horizontal 表示横向，横向的话 CrossAxis 和 MainAxis 表示的轴也会调换，为 Axis.Horizontal 的情况也较少。
  • semanticChildCount：不太清楚。
  • shrinkWrap：不太清楚。
  • children：子组件，不用多说。

四，关于SliverGridDelegate

构造 GridView 的委托者，它有两个实现类：

  • SliverGridDelegateWithFixedCrossAxisCount

    　　该委托者通常用于每一行的子组件个数固定的情况，它可以指定如下几个属性：

    • crossAxisCount：必传参数，Cross 轴（在 GridView 中通常是横轴，即每一行）子组件个数。
    • childAspectRatio：子组件宽高比，如 2 表示宽：高=2:1,如 0.5 表示宽：高=0.5:1=1:2，简单来说就是值大于 1 就会宽大于高，小于 1 就会宽小于高。
    • crossAxisSpacing：Cross 轴子组件的间隔，一行中第一个子组件左边不会添加间隔，最后一个子组件右边不会添加间隔，这一点很棒。
    • mainAxisSpacing：Main 轴（在 GridView 中通常是纵轴，即每一列）子组件间隔，也就是每一行之间的间隔，同样第一行的上边和最后一行的下边不会添加间隔。
  • SliverGridDelegateWithMaxCrossAxisExtent

    • maxCrossAxisExtent：必传参数，
    • Cross 轴（在 GridView 中通常是横轴，即每一行）子组件最大宽度，会根据该值来决定一行摆放几个子组件。

　　　　其余属性 childAspectRatio、crossAxisSpacing、mainAxisSpacing 同 SliverGridDelegateWithFixedCrossAxisCount。

五，示例demo　　

import ‘package:flutter/material.dart‘;
import ‘package:flutter/src/rendering/sliver.dart‘;
import ‘package:flutter/src/rendering/sliver_grid.dart‘;
import ‘package:flutter_vscode/listview_demo.dart‘;

class GridViewDemo extends StatefulWidget {
  @override
  _GridViewDemoState createState() => new _GridViewDemoState();
}

class _GridViewDemoState extends State<GridViewDemo> {
  List<BaseBean> gridList;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    gridList = new List<BaseBean>.generate(
        32, (i) => new BaseBean("name$i", i, "content=$i"));
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "",
      home: new Scaffold(
        appBar: new AppBar(
          centerTitle: true,
          title: new Text("GridView"),
        ),
        body: gridViewDefaultCount(gridList),
      ),
    );
  }

  List<Widget> initListWidget(List<BaseBean> list) {
    List<Widget> lists = [];
    for (var item in list) {
      lists.add(new Container(
        height: 50.0,
        width: 50.0,
        color: Colors.yellow,
        child: new Center(
            child: new Text(
          item.age.toString(),
        )),
      ));
    }
    return lists;
  }

  Widget gridViewDefaultCount(List<BaseBean> list) {
    return GridView.count(
//      padding: EdgeInsets.all(5.0),
      crossAxisCount: 5,
      //一行多少个
      scrollDirection: Axis.vertical,
      //滚动方向
      crossAxisSpacing: 10.0,
      // 左右间隔
      mainAxisSpacing: 10.0,
      // 上下间隔
      childAspectRatio: 2 / 5,
      //宽高比
      children: initListWidget(list),
    );
  }

  ///GridView.extent 允许您指定项的最大像素宽度
  Widget gridViewDefaultExtent(List<BaseBean> list) {
    return GridView.extent(
      ///设置item的最大像素宽度  比如 130
      maxCrossAxisExtent: 130.0,

      ///其他属性和count一样
      children: initListWidget(list),
    );
  }

  ///GridView.custom 就是自己定制规则
  /// 这里说一下 GridView.count gridDelegate 其实就是内部实现 SliverGridDelegateWithFixedCrossAxisCount
  /// GridView.extent gridDelegate 其实就是内部实现 SliverGridDelegateWithMaxCrossAxisExtent
  Widget gridViewDefaultCustom(List<BaseBean> list) {
    return GridView.custom(
      gridDelegate: MyGridViewDefaultCustom(
        crossAxisCount: 2,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 1.0,
      ),
      childrenDelegate: MyGridChildrenDelegate(
        (BuildContext context, int i) {
          return new Container(
              child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Text(
                "${list[i].name}",
                style: new TextStyle(fontSize: 18.0, color: Colors.red),
              ),
              new Text(
                "${list[i].age}",
                style: new TextStyle(fontSize: 18.0, color: Colors.green),
              ),
              new Text(
                "${list[i].content}",
                style: new TextStyle(fontSize: 18.0, color: Colors.blue),
              ),
            ],
          ));
        },
        childCount: list.length,
      ),
    );
  }

  ///GridView.builder  可以定义gridDelegate的模式
  Widget gridViewDefaultBuilder(List<BaseBean> list) {
    return GridView.builder(
        gridDelegate: MyGridViewDefaultCustom(
          crossAxisCount: 2,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 1.0,
        ),
        itemBuilder: (context, i) => new Container(
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  new Text(
                    "${list[i].name}",
                    style: new TextStyle(fontSize: 18.0, color: Colors.red),
                  ),
                  new Text(
                    "${list[i].age}",
                    style: new TextStyle(fontSize: 18.0, color: Colors.green),
                  ),
                  new Text(
                    "${list[i].content}",
                    style: new TextStyle(fontSize: 18.0, color: Colors.blue),
                  ),
                ],
              ),
            ));
  }
}

///自定义SliverGridDelegate
class MyGridViewDefaultCustom extends SliverGridDelegate {
  ///横轴上的子节点数。  一行多少个child
  final int crossAxisCount;

  ///沿主轴的每个子节点之间的逻辑像素数。 默认垂直方向的子child间距  这里的是主轴方向 当你改变 scrollDirection: Axis.vertical,就是改变了主轴发方向
  final double mainAxisSpacing;

  ///沿横轴的每个子节点之间的逻辑像素数。默认水平方向的子child间距
  final double crossAxisSpacing;

  ///每个孩子的横轴与主轴范围的比率。 child的宽高比  常用来处理child的适配
  final double childAspectRatio;

  bool _debugAssertIsValid() {
    assert(mainAxisSpacing >= 0.0);
    assert(crossAxisSpacing >= 0.0);
    assert(childAspectRatio > 0.0);
    return true;
  }

  const MyGridViewDefaultCustom({
    @required this.crossAxisCount,
    this.mainAxisSpacing = 0.0,
    this.crossAxisSpacing = 0.0,
    this.childAspectRatio = 1.0,
  })  : assert(crossAxisCount != null && crossAxisCount > 0),
        assert(mainAxisSpacing != null && mainAxisSpacing >= 0),
        assert(crossAxisSpacing != null && crossAxisSpacing >= 0),
        assert(childAspectRatio != null && childAspectRatio > 0);

  ///  返回值有关网格中图块大小和位置的信息。这里就是处理怎么摆放 我们可以自己定义
  ///   SliverGridLayout是抽象类  SliverGridRegularTileLayout继承于SliverGridLayout是抽象类
  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    // TODO: implement getLayout
    assert(_debugAssertIsValid());

    ///对参数的修饰 自定义
    final double usableCrossAxisExtent =
        constraints.crossAxisExtent - crossAxisSpacing * (crossAxisCount - 1);
    final double childCrossAxisExtent = usableCrossAxisExtent / crossAxisCount;
    final double childMainAxisExtent = childCrossAxisExtent / childAspectRatio;
    return MySliverGridLayout(
      crossAxisCount: crossAxisCount,
      mainAxisStride: childMainAxisExtent + mainAxisSpacing,
      crossAxisStride: childCrossAxisExtent + crossAxisSpacing,
      childMainAxisExtent: childMainAxisExtent,
      childCrossAxisExtent: childCrossAxisExtent,
      reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),
    );
  }

  /// 和ListView的 shouldRebuild 作用一样   之前的实例和新进来的实例是相同的就返回true
  @override
  bool shouldRelayout(SliverGridDelegate oldDelegate) {
    // TODO: implement shouldRelayout
    return true;
  }
}

///自定义SliverGridLayout
class MySliverGridLayout extends SliverGridLayout {
  final int crossAxisCount;

  final double mainAxisStride;

  final double crossAxisStride;

  final double childMainAxisExtent;

  final double childCrossAxisExtent;

  final bool reverseCrossAxis;

  const MySliverGridLayout({
    @required this.crossAxisCount,
    @required this.mainAxisStride,
    @required this.crossAxisStride,
    @required this.childMainAxisExtent,
    @required this.childCrossAxisExtent,
    @required this.reverseCrossAxis,
  })  : assert(crossAxisCount != null && crossAxisCount > 0),
        assert(mainAxisStride != null && mainAxisStride >= 0),
        assert(crossAxisStride != null && crossAxisStride >= 0),
        assert(childMainAxisExtent != null && childMainAxisExtent >= 0),
        assert(childCrossAxisExtent != null && childCrossAxisExtent >= 0),
        assert(reverseCrossAxis != null);

  ///如果有，则完全显示所有图块所需的滚动范围
  ///“childCount”儿童总数。
  ///
  ///子计数永远不会为空。
  @override
  double computeMaxScrollOffset(int childCount) {
    // TODO: implement computeMaxScrollOffset
    return null;
  }

  ///具有给定索引的子项的大小和位置。
  @override
  SliverGridGeometry getGeometryForChildIndex(int index) {
    // TODO: implement getGeometryForChildIndex
    return null;
  }

  ///在此滚动偏移处（或之前）可见的最大子索引。
  @override
  int getMaxChildIndexForScrollOffset(double scrollOffset) {
    // TODO: implement getMaxChildIndexForScrollOffset
    return null;
  }

  ///在此滚动偏移处（或之后）可见的最小子索引。
  @override
  int getMinChildIndexForScrollOffset(double scrollOffset) {
    // TODO: implement getMinChildIndexForScrollOffset
    return null;
  }
}

// ignore: slash_for_doc_comments
/**
 * 继承SliverChildBuilderDelegate  可以对列表的监听
 */
class MyGridChildrenDelegate extends SliverChildBuilderDelegate {
  MyGridChildrenDelegate(
    Widget Function(BuildContext, int) builder, {
    int childCount,
    bool addAutomaticKeepAlive = true,
    bool addRepaintBoundaries = true,
  }) : super(builder,
            childCount: childCount,
            addAutomaticKeepAlives: addAutomaticKeepAlive,
            addRepaintBoundaries: addRepaintBoundaries);

  ///监听 在可见的列表中 显示的第一个位置和最后一个位置
  @override
  void didFinishLayout(int firstIndex, int lastIndex) {
    print(‘firstIndex: $firstIndex, lastIndex: $lastIndex‘);
  }

  ///可不重写 重写不能为null  默认是true  添加进来的实例与之前的实例是否相同 相同返回true 反之false
  ///listView 暂时没有看到应用场景 源码中使用在 SliverFillViewport 中
  @override
  bool shouldRebuild(SliverChildBuilderDelegate oldDelegate) {
    // TODO: implement shouldRebuild
    print("oldDelegate$oldDelegate");
    return super.shouldRebuild(oldDelegate);
  }
}

五，官方文档

　　官方文档

原文地址：https://www.cnblogs.com/lxlx1798/p/11063857.html

时间： 2024-10-04 01:40:47

【Flutter学习】基本组件之基本列表Gradview组件的相关文章

小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装, 今天我介绍下如何在小程序中封装一个头部公用组件 首先,所有父组件(调用页面)的json文件都要引用子组件:index.json { "usingComponents": { "header": "../../component/header/header", } } 一,组件定义(封装) 子组件:header.wxml <view name='header' class

Ext JS 6学习文档-第3章-基础组件

基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮,文本框,日期选择器等等 表单字段的校验 菜单和工具栏 设计一个表单 计算器程序– 本章的示例项目 转载请注明出处:http://www.jeeboot.com/archives/1219.html 本章的主要目的是创建一个表单设计和一个计算器示例项目.以下图分别展示了表单设计和计算器设计. 首先,你观察下列表单设计,你会发现我们使用了大量的控

Flutter学习资料整合

1.Dart 面向对象语言,与java类比学习 非常适合移动和Web应用程序 1.dart官网 2.Dark2 中文文档 3.Dart语法学习 4.极客学院Dart学习 5.Flutter与Dart 入门 2.Flutter 树形布局,一切皆组件 1.flutter文档 2.flutter中文文档(更新滞后) 3.flutter学习入门: http://jspang.com/archives/ https://juejin.im/user/59ed44cf6fb9a0451c398c45/pos

【flutter学习】基础知识（一）

今天开始学习一下flutter 学习思路:首先由一个简单的例子引出每次学习的对象,一点一点加入元素,针对于代码去了解学习详细知识. 看完本篇博客能够快速的读懂flutter简单代码. flutter Hello Word 这是一个简单的Hello Word 首先引入了material库material是什么,是一个拥有基本样式的库. runApp(runApp是什么)是程序的开始,这个函数需要一个Widget(Widget是什么),习惯叫他组件. 这里传入了一个嵌套的Widget,Center(

Bootstarp学习（十九）列表组

列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码: ?  LESS版本:对应的源码文件 list-group.less ?   Sass版本:对应的源码文件是 _list-group.scss ?   编译出的Bootstrap版本:对应的源码bootstrap.css文件第4820行-第4994行 下面几个小节会对这几种列表组详细讲解,大家不要

ASP.NET列表生成组件DbNetList控件下载及介绍

DbNetList是一个综合功能的列表选择组件,作为动态HTML(DHTML)实现.运用DbNetList,你可以快速为自己的web页面添加数据库驱动的列表.下拉式列表(drop-down).树型和复选框列表.DbNetList兼容最流行的各种数据库服务器,包括:SQL Server.Oracle和Informix. 具体功能: 生成列表.多列列表.下拉式列表(drop-down).树型列表.复选框列表... 提供ASP 和 ASP.NET的本地版本. 基于浏览器.无论何处均可设计和运行.无需客

详解Bootstrap列表组组件

列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.less SASS:_list-group.scss 列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分: list-group:列表组容器,常用的是ul元素,也可以是ol或div元素 list-group-item:列表项,常用的是l

前端组件收集整理列表

https://www.luoxiao123.cn/1196.html 这里是收集的web前端开发常用前端开发组件库,搭建web app常用的样式/组件等收集列表(移动优先).主要包含前端框架,构建工具,自动化模块.jQuery插件.前端样式等,囊括最实用的前端开发组件库! 0. 前端自动化 前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner webpack(模块管理兼打包):http://web

Android学习笔记—第四章 Android开发组件2

第四章 Android开发组件2 列表类组件 (1)ListView组件:以垂直列表的形式列出需要显示的列表项 相关属性: a. android:divider  用于为列表视图设置分隔条,可以用颜色或者图片资源 b. android:dividerHeight  设置分隔条的高度 c. android:entries  通过数组资源为ListView指定列表项 d. android:footerDividersEnabled  设置是否在footerView之前绘制分隔条,默认为true. e