专栏首页李蔚蓬的专栏Flutter | 常用组件分类、概述、实战

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

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();
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter | 使用 InkResponse和 InkWell组件 实现事件操作

    凌川江雪
  • Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

    【pushAndRemoveUntil与pushNamedAndRemoveUntil区别】

    凌川江雪
  • Android中asset文件夹和raw文件夹区别

    这阵子有位同学在一个命名非“raw”的文件夹中放置mp3文件,导致R文件报错,故此研究,寻得此篇文章,特做分享。

    凌川江雪
  • Flutter | 使用 InkResponse和 InkWell组件 实现事件操作

    凌川江雪
  • Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

    【pushAndRemoveUntil与pushNamedAndRemoveUntil区别】

    凌川江雪
  • 黑客新手入侵云服务器仅需4小时

    外国媒体发表文章对云服务器的安全性做了剖析,以下为文章内容摘要:入侵云服务器需要多长时间?为了探究这一问题答案,云安全创新企业CloudPassage联接6台...

    安恒信息
  • 《笨办法学Python》 第38课手记

    《笨办法学Python》 第38课手记 注意这是第三版的《笨办法学Python》的内容,我后来发现第三版存在很大的问题,就放弃了第三版开始使用第四版,第四版的第...

    Steve Wang
  • pandas获取数据子集

    数据子集是原始数据集的部分观察或者变量或者部分观察与变量,这是一个数据选择过程(按着业务的目标选择所需的观察和变量)。

    陆勤_数据人网
  • 企业高效的经营管理需要清晰的管理指标

    所谓的管理指标就是企业经营和管理活动所需要达成的经营成果衡量标准。通俗地讲就是一个企业为了实现自己的经营结果而需要组织成员,包括每个岗位的员工、每个部门、每个业...

    明悦数据
  • 反射类的main方法

    有时候我们需要调用一个类的Main方法,也可说是执行这个类的代码。但是这时候这个类我们还没有写好,或者这个类是通过网络运行时传给我们的,我们就不可能在程序中知道...

    MonroeCode

扫码关注云+社区

领取腾讯云代金券