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,
        ),

      ],
    );

效果图：