Flutter | 常用组件分类、概述、实战

凌川江雪

发布于 2020-06-16 14:59:16

3.8K0

发布于 2020-06-16 14:59:16

文章被收录于专栏：李蔚蓬的专栏李蔚蓬的专栏

Flutter组件的分类

文字类型
容器类型
辅助提示类型
列表类型
系统主题风格类型
交互类型

文字类型

用于描述文字，如Text组件，一个普通的文本，属性有字体的颜色、大小、下划线、删除线、加粗、字体风格等； RichText组件，一个富文本，可以描述丰富的字体样式；

案例如下：（Text的所有属性及相关的意义）

        /// color 颜色
        /// decoration 删除线
        /// decorationColor 删除线颜色
        /// decorationStyle 删除线样式
        /// fontSize 大小
        /// fontStyle 斜体
        /// fontFamily 字体
        /// fontWeight 字体粗细
        /// height 跨度
        /// letterSpacing 字母间隔
        new Text(
          'Text组件使用11111111111111111111111111hello-world11111111111111111111111111111end',
          style: TextStyle(
            color: const Color(0xffff0000),
            // none 不显示装饰线条 underline 字体下方 overline 字体上方 lineThrough 穿过文字
            decoration: TextDecoration.underline,
            // solid 直线 double 双下划线 dotted 虚线 dashed 点下划线 wavy 波浪线
            decorationStyle: TextDecorationStyle.wavy,
            decorationColor: const Color(0xff00ee00),
//                        decorationColor: Colors.red,
            //字体大小
            fontSize: 15.0,
            // normal 正常 italic 斜体
            fontStyle: FontStyle.normal,
            // monospace  serif
            fontFamily: 'serif',
            // w100 - w900  normal(w400) bold(w700) 字体宽度
//                        fontWeight: FontWeight.bold,
            fontWeight: FontWeight.w100,
            //字体间隙
            letterSpacing: 2.0,
            //高度
            height: 2,
          ),
          
          // 段落的间距样式！！！！！！！！可以注释掉这一部分，看看效果！！！
          strutStyle: StrutStyle(
            fontFamily: 'serif',//字体，如果此属性没设置，则从fontFamilyFallback去找；
            fontFamilyFallback: ['monospace', 'serif'],//字体集合，如果这两个都没设置，则使用系统默认
            fontSize: 10.0,
            height: 2,
            leading: 2.0,//首字母到后面字母的倍数
            fontWeight: FontWeight.w200,
            fontStyle: FontStyle.normal,
            forceStrutHeight: true,//是否强制设置间距和高度
            debugLabel: 'text demo',//类似于 semanticsLabel！！！
          ),
          
          textAlign: TextAlign.left,//居左
          textDirection: TextDirection.ltr,//文字的方向
          //用于配置国际化语言！！！
          locale: Locale('zh_CN'),
          // 软包裹 文字是否应该在软断行处断行
          //软断行 指 文本中有英文横杆之类的，会自动软断行！！！！！
          softWrap: false,
          //文字超出显示区域时候，超出的部分怎么表示
          // clip 裁剪  fade 淡入   ellipsis 省略号   visible 容器外也会渲染组件
          overflow: TextOverflow.ellipsis,
          //文字的缩放比例
          textScaleFactor: 1.0,
          //文字最多显示几行
          maxLines: 2,
          // 语义标签
          semanticsLabel: 'text demo',
          //文字的宽度的基准， longestLine 以文字的最长的线为基准
          textWidthBasis: TextWidthBasis.parent,
        ),

容器类型

即容器组件，可以承载一个内容的展示

 new Container(
                      alignment: Alignment.center,//居中
                      padding: const EdgeInsets.all(50.0),
                      margin: const EdgeInsets.all(60.0),
                      //Container的宽高 的约束！！！！！
                      constraints: new BoxConstraints.expand(
                        height:
                            Theme.of(context).textTheme.display1.fontSize * 1.1 + 100.0,
                      ),
                      //容器的宽高，子组件超过则显示不出来
                      width: 250.0,
                      height: 100.0,
                    //背景的装饰
                      decoration: buildBoxDecoration(),
                    //前景的装饰
//                      foregroundDecoration: buildBoxDecorations(),
                      child: new Text('容器演示'),
                    //绕Z轴旋转
                      transform: new Matrix4.rotationZ(0.1),
                    ),

-------------------------------------------------

  //返回Decoration对象
  Decoration buildBoxDecoration() {
    return new BoxDecoration(
      color: const Color(0xfffce5cd),
      //设置Border属性给容器添加边框
      border: new Border.all(
        //为边框添加颜色
        color: const Color(0xff6d9eed),
        //为边框宽度
        width: 8.0,
      )
    );
  }

  Decoration buildBoxDecorations() {
    return BoxDecoration(
        color: const Color(0xfffce5cd),
        //设置Border属性给容器添加边框
        border: new Border.all(
          //为边框添加颜色
            color: Colors.red,
            //为边框宽度
            width: 8.0,
            style: BorderStyle.solid
        )
    );
  }

辅助提示类型

RaisedButton
BottomSheet【注意，可以自定义布局】
SnackBar

RaisedButton(
          onPressed: () {
            //注意这里的context是BuildContext
            Scaffold.of(context).showBottomSheet(
                  (BuildContext context) {
                    //这里可以是一个自定义的View Text组件亦可，Container亦可
                return new Container(
                  //底部弹出文本框
                  child: Text('hello world1'),
                  width: 150,
                  height: 50,
                );
              },
              //颜色
              backgroundColor: Theme.of(context).primaryColor,
              //高度值
              elevation: 10,
              //边角
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5.0)),
              //防锯齿
              clipBehavior: Clip.antiAlias,
            );

            // 生成一个 SnackBar
            Scaffold.of(context).showSnackBar(SnackBar(content: Text('hello')));
          },
          child: Text('点击显示BottomSheet'),//按钮文本
          color: Theme.of(context).primaryColor,//颜色
        ),

列表类型

scrollDirection：定义滑动的方向；
children: <Widget>[]：子组件集；
Divider、VerticalDivider：【可以作为<Widget>[]的元素】分隔线；

        new Divider(height: 1.0, color: Colors.grey),
        //      new VerticalDivider(width: 1.0, color: Colors.grey),
        Text(
          '${widget.counter}',
          style: Theme.of(context).textTheme.display1,
        ),

ListTile 表头【官方封装组件，可以作为ListView的 <Widget>[]的元素，具有属性如下所示】

代码：

ListView(
      // 列表滑动的方向
      scrollDirection: Axis.vertical,
      //    scrollDirection: Axis.horizontal,
      children: <Widget>[

        ListTile(
          //预览小图标
          leading: new Icon(Icons.account_circle),
          //标题
          title: new Text(data),
          //子标题
          subtitle: new Text('简介'),
          // 右边的图标
          trailing: new Icon(Icons.chevron_right),
          onTap: () {
            print('点击事件：点击了 ListTile  ==== title为：$data');
          },
          onLongPress: () {
            print('长按事件：长按了 ListTile  ==== title为：$data');
          },
          selected: true,
        ),

        Text(
          '${widget.counter}',
          style: Theme.of(context).textTheme.display1,
        ),
        Text(
          '${widget.counter}',
          style: Theme.of(context).textTheme.display1,
        ),

      ],
    );

效果图：

点击或者长按，

都可以看到对应的信息：

CheckboxListTile 【官方封装组件， 可以作为ListView的 <Widget>[]的元素， 具有属性如下所示】

new CheckboxListTile(
          value: isChecked,
          //点击后的回调
          onChanged: ((bool value) {
            print('点击了CheckboxListTile ， 选中状态为： $value');
            setState(() {
              isChecked = !isChecked;
            });
          }),
          title: new Text('相册'),
          subtitle: new Text('相册的描述'),
          //选中
          selected: true,
          //选中的颜色
          activeColor: Colors.teal,
        ),

点击可看信息：

SwitchListTile 【官方封装组件， 可以作为ListView的 <Widget>[]的元素， 具有属性如下所示】

new SwitchListTile(
          //选中状态值
          value: isChecked2,
          //点击后的回调
          onChanged: ((bool value) {
            print('点击了SwitchListTile ， 选中状态为： $value');
            setState(() {
              isChecked2 = !isChecked2;
            });
          }),
          //主次标题
          title: new Text('相册'),
          subtitle: new Text(
              '相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。'),
          //选中
          selected: true,
          //选中的颜色
          activeColor: Colors.teal,
          //左侧图标
          secondary: new Icon(Icons.account_circle),
          //文字过多时，是否三行显示
          isThreeLine: true,
        ),

AboutListTile【官方封装组件， 可以作为ListView的 <Widget>[]的元素， 具有属性如下所示】

new AboutListTile(
          icon: new Icon(Icons.panorama),
          //公司logo
          applicationIcon: new FlutterLogo(),
          //app名称
          applicationName: '凌川江雪',
          //app版本号
          applicationVersion: 'V1.0.0',
          //版权信息
          applicationLegalese: '版权归XX科技有限公司所有...',
          //        child: ,//关于应用名
          //        aboutBoxChildren: <Widget>[],//更多信息
        ),

运行效果：

点击VIEW LICENSES 会跳转到一个默认的协议页面：

ListView.builder：【ListView的另一种构建方式】

  final List<int> colorDatas = <int>[
    50,
    100,
    200,
    300,
    400,
    500,
    600,
    700,
    800,
    900
  ];


  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.all(8.0),
      //类似于onBindViewHolder，index类比position
      // %10 是为了 颜色数据 可以在 colorDatas中循环读取
      itemBuilder: (BuildContext context,int index){
        return Icon(
          Icons.image,
          color: Colors.blue[colorDatas[index%10]],
          size: 100,
        );
      },
      itemCount: 20,
    );
  }

系统主题有关的组件 MaterialApp和AppBar详解

Main.dart中有一个MaterialApp组件， 通过这个组件就可以实现很多Material风格的东西：
- theme：主题属性； primaryColor：定义主题颜色； primarySwatch：标题栏颜色；
主题颜色的运用：
Scaffold Scaffold组件可以有的属性如下：

AppBar（title属性，Text组件； action：动作响应；！！！！ titleSpacing：标题文字间距； toolbarOpacity：标题透明度；）

floatingActionButtonLocation floatingActionButton

实例1：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
//        title: new Text('目标页面'),
        title: new Text(
          '主页面传过来的数据： $data',
        ),

//        backgroundColor: Colors.blue,
      ),

      body: RaisedButton(
        onPressed: () {
          print('打开了目标页面');
          Navigator.of(context).pop();
          },
        child: Text('返回上一个页面'),
      ),
//      body: Contents(),
    );
  }
}

实例2：【main.dart】

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(
          widget.title,
          style: TextStyle(color: Theme.of(context).primaryColorDark),
        ),
        toolbarOpacity: 1.0,
        bottomOpacity: 1.0,
      ),

      // 封装的 内容页面
      body: ContentPage(counter),
      //悬浮按钮的位置
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      //悬浮按钮组件
      floatingActionButton: buildFloatingActionButtonExtends(),
    ); // This trailing comma makes auto-formatting nicer for build methods.
  }

交互类型组件

floatingActionButton

 //悬浮按钮的位置
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      //悬浮按钮组件
      floatingActionButton: buildFloatingActionButton(),
    ); // This trailing comma makes auto-formatting nicer for build methods.

--------------------------------------
FloatingActionButton buildFloatingActionButton() {
    return FloatingActionButton(
      //点击回调
      onPressed: _incrementCounter,
      //长按按钮的提示
      tooltip: 'Increment',
      //悬浮按钮的图标
      child: Icon(Icons.add),
      // icon图标和文字的颜色  默认：ThemeData.accentIconTheme.color
      foregroundColor: Colors.red,
      // 按钮的颜色  默认：ThemeData.accentColor
      backgroundColor: Colors.yellow,
      // 有输入焦点 按钮的颜色  默认：ThemeData.focusColor
      focusColor: Colors.tealAccent,
      // 指针悬停时 按钮的颜色  默认：ThemeData.hoverColor
      hoverColor: Colors.white,
      // 点击时的水波纹颜色  默认：如果为null，使用FloatingActionButtonThemeData.splashColor
      // 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
      splashColor: Colors.blue,
      // Hero动画
      heroTag: null,
      // Z轴阴影大小 默认：6
      elevation: 10.0,
      // 有输入焦点的阴影大小
      focusElevation: 50.0,
      // 指针悬停时的阴影大小
      hoverElevation: 50.0,
      // 点击时的阴影大小
      highlightElevation: 50.0,
      // 按钮不可用时的阴影大小
      disabledElevation: 10.0,
      // 按钮尺寸：默认是56逻辑像素 如果为true就是48逻辑像素
      mini: false,
      //配置圆角弧度、形状
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
      //防锯齿
      clipBehavior: Clip.antiAlias,
      focusNode: FocusNode(debugLabel: 'floating_action_button'),
      autofocus: true,
      // 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      isExtended: true,
    );
  }

FloatingActionButton.extended

FloatingActionButton buildFloatingActionButtonExtends() {
    return FloatingActionButton.extended(
      //点击回调
      onPressed: _incrementCounter,
      //长按按钮的提示
      tooltip: 'Increment',
      //悬浮按钮的图标
//      icon: Icon(Icons.add),
      icon: Icon(Icons.done),
      label: new Text('呵呵哒，呵呵呵哒'),
      // icon图标和文字的颜色  默认：ThemeData.accentIconTheme.color
      foregroundColor: Colors.red,
      // 按钮的颜色  默认：ThemeData.accentColor
      backgroundColor: Colors.yellow,
      // 有输入焦点 按钮的颜色  默认：ThemeData.focusColor
      focusColor: Colors.tealAccent,
      // 指针悬停时 按钮的颜色  默认：ThemeData.hoverColor
      hoverColor: Colors.white,
      // 点击时的水波纹颜色  默认：如果为null，使用FloatingActionButtonThemeData.splashColor
      // 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
      splashColor: Colors.blue,
      // Hero动画
      heroTag: null,
      // Z轴阴影大小 默认：6
      elevation: 10.0,
      // 有输入焦点的阴影大小
      focusElevation: 50.0,
      // 指针悬停时的阴影大小
      hoverElevation: 50.0,
      // 点击时的阴影大小
      highlightElevation: 50.0,
      // 按钮不可用时的阴影大小
      disabledElevation: 10.0,
      //配置圆角弧度、形状
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
      //防锯齿
      clipBehavior: Clip.antiAlias,
      focusNode: FocusNode(debugLabel: 'floating_action_button'),
      autofocus: true,
      // 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      isExtended: true,
    );
  }

参考自CSDN的Flutter入门课程

main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
//        primarySwatch: Colors.yellow,
        primaryColor: Colors.teal,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(
          widget.title,
          style: TextStyle(color: Theme.of(context).primaryColorDark),
        ),
        toolbarOpacity: 1.0,
        bottomOpacity: 1.0,
      ),

      // 封装的 内容页面
      body: ContentPage(counter),
      //悬浮按钮的位置
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      //悬浮按钮组件
      floatingActionButton: buildFloatingActionButtonExtends(),
    ); // This trailing comma makes auto-formatting nicer for build methods.
  }

  FloatingActionButton buildFloatingActionButtonExtends() {
    return FloatingActionButton.extended(
      //点击回调
      onPressed: _incrementCounter,
      //长按按钮的提示
      tooltip: 'Increment',
      //悬浮按钮的图标
//      icon: Icon(Icons.add),
      icon: Icon(Icons.done),
      label: new Text('呵呵哒，呵呵呵哒'),
      // icon图标和文字的颜色  默认：ThemeData.accentIconTheme.color
      foregroundColor: Colors.red,
      // 按钮的颜色  默认：ThemeData.accentColor
      backgroundColor: Colors.yellow,
      // 有输入焦点 按钮的颜色  默认：ThemeData.focusColor
      focusColor: Colors.tealAccent,
      // 指针悬停时 按钮的颜色  默认：ThemeData.hoverColor
      hoverColor: Colors.white,
      // 点击时的水波纹颜色  默认：如果为null，使用FloatingActionButtonThemeData.splashColor
      // 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
      splashColor: Colors.blue,
      // Hero动画
      heroTag: null,
      // Z轴阴影大小 默认：6
      elevation: 10.0,
      // 有输入焦点的阴影大小
      focusElevation: 50.0,
      // 指针悬停时的阴影大小
      hoverElevation: 50.0,
      // 点击时的阴影大小
      highlightElevation: 50.0,
      // 按钮不可用时的阴影大小
      disabledElevation: 10.0,
      //配置圆角弧度、形状
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
      //防锯齿
      clipBehavior: Clip.antiAlias,
      focusNode: FocusNode(debugLabel: 'floating_action_button'),
      autofocus: true,
      // 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      isExtended: true,
    );
  }


//  FloatingActionButton buildFloatingActionButton() {
//    return FloatingActionButton(
//      //点击回调
//      onPressed: _incrementCounter,
//      //长按按钮的提示
//      tooltip: 'Increment',
//      //悬浮按钮的图标
//      child: Icon(Icons.add),
//      // icon图标和文字的颜色  默认：ThemeData.accentIconTheme.color
//      foregroundColor: Colors.red,
//      // 按钮的颜色  默认：ThemeData.accentColor
//      backgroundColor: Colors.yellow,
//      // 有输入焦点 按钮的颜色  默认：ThemeData.focusColor
//      focusColor: Colors.tealAccent,
//      // 指针悬停时 按钮的颜色  默认：ThemeData.hoverColor
//      hoverColor: Colors.white,
//      // 点击时的水波纹颜色  默认：如果为null，使用FloatingActionButtonThemeData.splashColor
//      // 如果FloatingActionButtonThemeData.splashColor 也为null,使用ThemeData.splashColor
//      splashColor: Colors.blue,
//      // Hero动画
//      heroTag: null,
//      // Z轴阴影大小 默认：6
//      elevation: 10.0,
//      // 有输入焦点的阴影大小
//      focusElevation: 50.0,
//      // 指针悬停时的阴影大小
//      hoverElevation: 50.0,
//      // 点击时的阴影大小
//      highlightElevation: 50.0,
//      // 按钮不可用时的阴影大小
//      disabledElevation: 10.0,
//      // 按钮尺寸：默认是56逻辑像素 如果为true就是48逻辑像素
//      mini: false,
//      //配置圆角弧度、形状
//      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
//      //防锯齿
//      clipBehavior: Clip.antiAlias,
//      focusNode: FocusNode(debugLabel: 'floating_action_button'),
//      autofocus: true,
//      // 配置组件到目标尺寸大小，默认值：ThemeData.materialTapTargetSize
//      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
//      isExtended: true,
//    );
//  }

  // 注意：BoxDecoration返回的是Decoration对象
  Decoration buildBoxDecoration() {
    return new BoxDecoration(
      color: const Color(0xfffce5cd),
      //设置Border属性给容器添加边框
      border: new Border.all(
        //为边框添加颜色
        color: const Color(0xff6d9eeb),
        //边框宽度
        width: 8.0,
      ),
    );
  }

  Decoration buildBoxDecorations() {
    return BoxDecoration(
      color: Colors.blue,
      border: Border.all(
        color: Colors.red,
        width: 10.0,
        style: BorderStyle.solid,
      ),
    );
  }
}

ContentPage.dart

import 'package:flutter/material.dart';

class ContentPage extends StatefulWidget {
  ContentPage(this.counter);

  int counter = 0;

  @override
  _ContentPageState createState() => _ContentPageState();
}

class _ContentPageState extends State<ContentPage> {
  @override
  Widget build(BuildContext context) {
    // 使用Column
    //    return Center(
    //      // Center is a layout widget. It takes a single child and positions it
    //      // in the middle of the parent.
    //      Column组件是不可拓展的
    //      child: Column(
    //        // Column is also a layout widget. It takes a list of children and
    //        // arranges them vertically. By default, it sizes itself to fit its
    //        // children horizontally, and tries to be as tall as its parent.
    //        //
    //        // Invoke "debug painting" (press "p" in the console, choose the
    //        // "Toggle Debug Paint" action from the Flutter Inspector in Android
    //        // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
    //        // to see the wireframe for each widget.
    //        //
    //        // Column has various properties to control how it sizes itself and
    //        // how it positions its children. Here we use mainAxisAlignment to
    //        // center the children vertically; the main axis here is the vertical
    //        // axis because Columns are vertical (the cross axis would be
    //        // horizontal).
    //        mainAxisAlignment: MainAxisAlignment.center,
    //        children: <Widget>[
    //          Text(
    //            'You have pushed the button this many times:',
    //          ),
    //          Text(
    //            '${widget.counter}',
    //            style: Theme.of(context).textTheme.display1,
    //          ),
    //
    //          /// color 颜色
    //          /// decoration 删除线
    //          /// decorationColor 删除线颜色
    //          /// decorationStyle 删除线样式
    //          /// fontSize 大小
    //          /// fontStyle 斜体
    //          /// fontFamily 字体
    //          /// fontWeight 字体粗细
    //          /// height 跨度
    //          /// letterSpacing 字母间隔
    //          //            new Text(
    //          //              'Text组件使用11111111111111111111111111hello-world11111111111111111111111111111end',
    //          //              style: TextStyle(
    //          //                color: const Color(0xffff0000),
    //          //                // none 不显示装饰线条 underline 字体下方 overline 字体上方 lineThrough 穿过文字
    //          //                decoration: TextDecoration.underline,
    //          //                // solid 直线 double 双下划线 dotted 虚线 dashed 点下划线 wavy 波浪线
    //          //                decorationStyle: TextDecorationStyle.wavy,
    //          //                decorationColor: const Color(0xff00ff00),
    //          //                //                decorationColor: Colors.red,
    //          //                fontSize: 25.0,
    //          //                // normal 正常 italic 斜体
    //          //                fontStyle: FontStyle.normal,
    //          //                // monospace  serif
    //          //                fontFamily: 'serif',
    //          //                // w100 - w900  normal(w400) bold(w700)
    //          //                fontWeight: FontWeight.bold,
    //          //                letterSpacing: 5.0,
    //          //                height: 2,
    //          //              ),
    //          //              // 段落的间距样式
    //          //              strutStyle: StrutStyle(
    //          //                fontFamily: 'serif',
    //          //                fontFamilyFallback: ['monospace', 'serif'],
    //          //                fontSize: 25.0,
    //          //                height: 2,
    //          //                leading: 2.0,
    //          //                fontWeight: FontWeight.w200,
    //          //                fontStyle: FontStyle.normal,
    //          //                forceStrutHeight: true,
    //          //                debugLabel: 'text demo',
    //          //              ),
    //          //              textAlign: TextAlign.left,
    //          //              textDirection: TextDirection.ltr,
    //          //              locale: Locale('zh_CN'),
    //          //              // 软包裹 文字是否应该在软断行处断行
    //          //              softWrap: false,
    //          //              //clip 裁剪  fade 淡入   ellipsis 省略号   visible 容器外也会渲染组件
    //          //              overflow: TextOverflow.ellipsis,
    //          //              textScaleFactor: 1.0,
    //          //              maxLines: 3,
    //          //              // 语义标签
    //          //              semanticsLabel: 'text demo',
    //          //              textWidthBasis: TextWidthBasis.longestLine,
    //          //            ),
    //
    //          /// Container介绍
    //          // alignment
    //          // padding
    //          // margin
    //          // constraints
    //          // width
    //          // height
    //          // decoration
    //          // foregroundDecoration
    //          // child
    //          // transform
    //          //            new Container(
    //          //              alignment: Alignment.center,
    //          //              padding: const EdgeInsets.all(8.0),
    //          //              margin: const EdgeInsets.all(8.0),
    //          //              constraints: new BoxConstraints.expand(
    //          //                height:
    //          //                    Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
    //          //              ),
    //          //              width: 300.0,
    //          //              height: 200.0,
    //          //              decoration: buildBoxDecoration(),
    //          ////              foregroundDecoration: buildBoxDecorations(),
    //          //              child: new Text('容器演示'),
    //          //              transform: new Matrix4.rotationZ(0.2),
    //          //            ),
    //
    //          RaisedButton(
    //            onPressed: () {
    //              Scaffold.of(context).showBottomSheet(
    //                    (BuildContext context) {
    //                  return new Container(
    //                    child: Text('hello world1'),
    //                    width: 300,
    //                    height: 100,
    //                  );
    //                },
    //                backgroundColor: Theme.of(context).primaryColor,
    //                elevation: 10,
    //                shape: RoundedRectangleBorder(
    //                    borderRadius: BorderRadius.circular(5.0)),
    //                clipBehavior: Clip.antiAlias,
    //              );
    //              Scaffold.of(context)
    //                  .showSnackBar(SnackBar(content: Text('hello')));
    //            },
    //            child: Text('点击显示BottomSheet'),
    //            color: Theme.of(context).primaryColor,
    //          ),
    //        ],
    //      ),
    //    );
    // 使用 ListView
    return buildListViews(widget.counter);
  }
}

class buildListViews extends StatefulWidget {
  buildListViews(this.counter);

  int counter = 0;

  @override
  buildListViewsState createState() => new buildListViewsState();
}

class buildListViewsState extends State<buildListViews> {
  String data = '联系人';

  bool isChecked = false;
  bool isChecked2 = false;

  final List<int> colorDatas = <int>[
    50,
    100,
    200,
    300,
    400,
    500,
    600,
    700,
    800,
    900
  ];


  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.all(8.0),
      //类似于onBindViewHolder，index类比position
      // %10 是为了 颜色数据 可以在 colorDatas中循环读取
      itemBuilder: (BuildContext context,int index){
        return Icon(
          Icons.image,
          color: Colors.blue[colorDatas[index%10]],
          size: 100,
        );
      },
      itemCount: 20,
    );
  }

//  @override
//  Widget build(BuildContext context) {
//    return ListView(
//      // 列表滑动的方向
//      scrollDirection: Axis.vertical,
//      //    scrollDirection: Axis.horizontal,
//      children: <Widget>[
////        Text(
////          'You have pushed the button this many times:',
////        ),
////
////        new Divider(height: 1.0, color: Colors.grey),
////        //      new VerticalDivider(width: 1.0, color: Colors.grey),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        //分隔线
////        new Divider(height: 1.0, color: Colors.grey),
////        //      new VerticalDivider(width: 1.0, color: Colors.grey),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        new Divider(height: 1.0, color: Colors.grey),
//        //      new VerticalDivider(width: 1.0, color: Colors.grey),
////        ListTile(
////          //预览小图标
////          leading: new Icon(Icons.account_circle),
////          //标题
////          title: new Text(data),
////          //子标题
////          subtitle: new Text('简介'),
////          // 右边的图标
////          trailing: new Icon(Icons.chevron_right),
////          onTap: () {
////            print('点击事件：点击了 ListTile  ==== title为：$data');
////          },
////          onLongPress: () {
////            print('长按事件：长按了 ListTile  ==== title为：$data');
////          },
////          selected: true,
////        ),
////        new CheckboxListTile(
////          value: isChecked,
////          //点击后的回调
////          onChanged: ((bool value) {
////            print('点击了CheckboxListTile ， 选中状态为： $value');
////            setState(() {
////              isChecked = !isChecked;
////            });
////          }),
////          title: new Text('相册'),
////          subtitle: new Text('相册的描述'),
////          //选中
////          selected: true,
////          //选中的颜色
////          activeColor: Colors.teal,
////        ),
//
////        new SwitchListTile(
////          //选中状态值
////          value: isChecked2,
////          //点击后的回调
////          onChanged: ((bool value) {
////            print('点击了SwitchListTile ， 选中状态为： $value');
////            setState(() {
////              isChecked2 = !isChecked2;
////            });
////          }),
////          //主次标题
////          title: new Text('相册'),
////          subtitle: new Text(
////              '相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。这是相册的描述。'),
////          //选中
////          selected: true,
////          //选中的颜色
////          activeColor: Colors.teal,
////          //左侧图标
////          secondary: new Icon(Icons.account_circle),
////          //文字过多时，是否三行显示
////          isThreeLine: true,
////        ),
//
////        new AboutListTile(
////          icon: new Icon(Icons.panorama),
////          //公司logo
////          applicationIcon: new FlutterLogo(),
////          //app名称
////          applicationName: '凌川江雪',
////          //app版本号
////          applicationVersion: 'V1.0.0',
////          //版权信息
////          applicationLegalese: '版权归XX科技有限公司所有...',
////          //        child: ,//关于应用名
////          //        aboutBoxChildren: <Widget>[],//更多信息
////        ),
//
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        Text(
//////          '${widget.counter}',
//////          style: Theme.of(context).textTheme.display1,
//////        ),
//////        Text(
//////          '${widget.counter}',
//////          style: Theme.of(context).textTheme.display1,
//////        ),
//////        Text(
//////          '${widget.counter}',
//////          style: Theme.of(context).textTheme.display1,
//////        ),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
////        Text(
////          '${widget.counter}',
////          style: Theme.of(context).textTheme.display1,
////        ),
//        /// color 颜色
//        /// decoration 删除线
//        /// decorationColor 删除线颜色
//        /// decorationStyle 删除线样式
//        /// fontSize 大小
//        /// fontStyle 斜体
//        /// fontFamily 字体
//        /// fontWeight 字体粗细
//        /// height 跨度
//        /// letterSpacing 字母间隔
////        new Text(
////          'Text组件使用11111111111111111111111111hello-world11111111111111111111111111111end',
////          style: TextStyle(
////            color: const Color(0xffff0000),
////            // none 不显示装饰线条 underline 字体下方 overline 字体上方 lineThrough 穿过文字
////            decoration: TextDecoration.underline,
////            // solid 直线 double 双下划线 dotted 虚线 dashed 点下划线 wavy 波浪线
////            decorationStyle: TextDecorationStyle.wavy,
////            decorationColor: const Color(0xff00ee00),
//////                        decorationColor: Colors.red,
////            //字体大小
////            fontSize: 15.0,
////            // normal 正常 italic 斜体
////            fontStyle: FontStyle.normal,
////            // monospace  serif
////            fontFamily: 'serif',
////            // w100 - w900  normal(w400) bold(w700) 字体宽度
//////                        fontWeight: FontWeight.bold,
////            fontWeight: FontWeight.w100,
////            //字体间隙
////            letterSpacing: 2.0,
////            //高度
////            height: 2,
////          ),
////
////          // 段落的间距样式！！！！！！！！可以注释掉这一部分，看看效果！！！
////          strutStyle: StrutStyle(
////            fontFamily: 'serif',//字体，如果此属性没设置，则从fontFamilyFallback去找；
////            fontFamilyFallback: ['monospace', 'serif'],//字体集合，如果这两个都没设置，则使用系统默认
////            fontSize: 10.0,
////            height: 2,
////            leading: 2.0,//首字母到后面字母的倍数
////            fontWeight: FontWeight.w200,
////            fontStyle: FontStyle.normal,
////            forceStrutHeight: true,//是否强制设置间距和高度
////            debugLabel: 'text demo',//类似于 semanticsLabel！！！
////          ),
////
////          textAlign: TextAlign.left,//居左
////          textDirection: TextDirection.ltr,//文字的方向
////          //用于配置国际化语言！！！
////          locale: Locale('zh_CN'),
////          // 软包裹 文字是否应该在软断行处断行
////          //软断行 指 文本中有英文横杆之类的，会自动软断行！！！！！
////          softWrap: false,
////          //文字超出显示区域时候，超出的部分怎么表示
////          // clip 裁剪  fade 淡入   ellipsis 省略号   visible 容器外也会渲染组件
////          overflow: TextOverflow.ellipsis,
////          //文字的缩放比例
////          textScaleFactor: 1.0,
////          //文字最多显示几行
////          maxLines: 2,
////          // 语义标签
////          semanticsLabel: 'text demo',
////          //文字的宽度的基准， longestLine 以文字的最长的线为基准
////          textWidthBasis: TextWidthBasis.parent,
////        ),
//
////        / Container介绍
////         alignment
////         padding
////         margin
////         constraints
////         width
////         height
////         decoration
////         foregroundDecoration
////         child
////         transform
////                    new Container(
////                      alignment: Alignment.center,//居中
////                      padding: const EdgeInsets.all(50.0),
////                      margin: const EdgeInsets.all(60.0),
////                      //Container的宽高 的约束！！！！！
////                      constraints: new BoxConstraints.expand(
////                        height:
////                            Theme.of(context).textTheme.display1.fontSize * 1.1 + 100.0,
////                      ),
////                      //容器的宽高，子组件超过则显示不出来
////                      width: 250.0,
////                      height: 100.0,
////                    //背景的装饰
////                      decoration: buildBoxDecoration(),
////                    //前景的装饰
//////                      foregroundDecoration: buildBoxDecorations(),
////                      child:  new Text('容器演示'),
////                    //绕Z轴旋转
////                      transform: new Matrix4.rotationZ(0.1),
////                    ),
//
////        RaisedButton(
////          onPressed: () {
////            //注意这里的context是BuildContext
////            Scaffold.of(context).showBottomSheet(
////                  (BuildContext context) {
////                    //这里可以是一个自定义的View Text组件亦可，Container亦可
////                return new Container(
////                  //底部弹出文本框
////                  child: Text('hello world1'),
////                  width: 150,
////                  height: 50,
////                );
////              },
////              //颜色
////              backgroundColor: Theme.of(context).primaryColor,
////              //高度值
////              elevation: 10,
////              //边角
////              shape: RoundedRectangleBorder(
////                  borderRadius: BorderRadius.circular(5.0)),
////              //防锯齿
////              clipBehavior: Clip.antiAlias,
////            );
////
////            // 生成一个 SnackBar
////            Scaffold.of(context).showSnackBar(SnackBar(content: Text('hello')));
////          },
////          child: Text('点击显示BottomSheet'),//按钮文本
////          color: Theme.of(context).primaryColor,//颜色
////        ),
//      ],
//    );
//  }

  //返回Decoration对象
  Decoration buildBoxDecoration() {
    return new BoxDecoration(
      color: const Color(0xfffce5cd),
      //设置Border属性给容器添加边框
      border: new Border.all(
        //为边框添加颜色
        color: const Color(0xff6d9eed),
        //为边框宽度
        width: 8.0,
      )
    );
  }

  Decoration buildBoxDecorations() {
    return BoxDecoration(
        color: const Color(0xfffce5cd),
        //设置Border属性给容器添加边框
        border: new Border.all(
          //为边框添加颜色
            color: Colors.red,
            //为边框宽度
            width: 8.0,
            style: BorderStyle.solid
        )
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

listview