Flutter lesson 6: Flutter组件之基础组件（二）

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})

child: Column(
  children: <Widget>[
    Center(child: CustomTitle(title: "说明")),
    Text("Row是一个布局Widget，相当于是前端CSS3中弹性盒模型布局中：flex-direction: row;作用就是使内容水平方向排列。"),
    Row(
      
    )
  ],
),

const Image({
  Key key,
  @required this.image, // 图片
  this.semanticLabel,
  this.excludeFromSemantics = false,
  this.width, // 用来指定显示图片区域的宽，并不是图片的宽度，默认图片的宽度
  this.height, // 用来指定显示图片区域的高，并不是图片的高度，默认图片的高度
  this.color, // 图片颜色，这个可以直接修改图片的颜色，相当于前端设置字体图标
  this.colorBlendMode, // 颜色和图片混合，需要配合color使用才会生效
  this.fit, // 设置图片填充
  this.alignment = Alignment.center, // 用来控制图片摆放的位置
  this.repeat = ImageRepeat.noRepeat, // 用来设置图片重复显示（repeat-x水平重复，repeat-y垂直重复，repeat两个方向都重复，no-repeat默认情况不重复）
  this.centerSlice, // 设置图片内部拉伸，相当于在图片内部设置了一个.9图，但是需要注意的是，要在显示图片的大小大于原图的情况下才可以使用这个属性，要不然会报错
  this.matchTextDirection = false,
  this.gaplessPlayback = false, // 当图片发生改变之后，重新加载图片过程中的样式（1、原图片保留）
  this.filterQuality = FilterQuality.low, // 图片 filter 质量，用的不多
})

# To add assets to your application, add an assets section, like this:
# assets:
#  - images/a_dot_burr.jpeg
#  - images/a_dot_ham.jpeg

assets:
  - images/logo.png
  - images/2.0x/logo.png
  - images/3.0x/logo.png

<key>NSPhotoLibraryUsageDescription</key>
<string>Use the gallery to select phonts</string>
<key>NSCameraUsageDescription</key>
<string>Use the camare to take phonts</string>
<key>NSMicrophoneUsageDescription</key>
<string>Use the Microphone to get voice</string>

new Image.network('https://www.lyt007.cn/img/favicon-32x32.png')

FadeInImage.assetNetwork(
  placeholder: 'images/logo.png',
  image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=324769017,4079415235&fm=26&gp=0.jpg',
  width: 120,
  fit: BoxFit.fitWidth,
)

new CachedNetworkImage(
  width: 120,
  fit: BoxFit.fitWidth,
  placeholder: new CircularProgressIndicator(),
  imageUrl: imageUrl,
  errorWidget: new Icon(Icons.error),
)

new Image.memory(bytes)

Image(
  image: AssetImage('images/logo.png'),
  width: 100,
  height: 100,
  alignment: Alignment.center,
  repeat: ImageRepeat.repeat,
  // fit: BoxFit.cover,
  filterQuality: FilterQuality.low,
)

enum BoxFit {
  fill, // 填充整个容器，宽高都不超出容器
  contain, // 按宽高中最小的那个来放大
  cover, // 按宽高中最大的那个来放大
  fitWidth, // 按照width放大
  fitHeight, // 按照高度方法
  none, // 不填充
  scaleDown,
}

const Text(
  this.data, {
  Key key,
  this.style,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaleFactor,
  this.maxLines,
  this.semanticsLabel,
})

const TextStyle({
  this.inherit = true, // 集成父级样式
  this.color, // 设置颜色
  this.backgroundColor, // 设置背景颜色
  this.fontSize, // 设置字体大小
  this.fontWeight, // 设置字体粗细 FontWeight.bold
  this.fontStyle, // 设置字体样式 FontStyle.normal  FontStyle.italic斜体
  this.letterSpacing, // 设置字间距
  this.wordSpacing, // 设置词间距
  this.textBaseline, // 文本基线
  this.height, // 设置行高
  this.locale, // 此属性很少设置，用于选择区域特定字形的语言环境
  this.foreground, // 文字的前景色
  this.background, // 文字的背景色
  this.shadows, // 设置字体阴影
  this.decoration, // 上划线，下划线以及删除线
  this.decorationColor, // 划线的颜色
  this.decorationStyle, // 划线的样式 这个style可能控制画实线，虚线，两条线，点, 波浪线等
  this.decorationThickness,
  this.debugLabel,
  String fontFamily, // 字体
  List<String> fontFamilyFallback, // 多个字体，是一个数组
  String package,
})

children: <Widget>[
  Center(child: CustomTitle(title: "Text Widget")),
  TextDemo(),
  Center(child: Text(text, style: TextStyle(
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dotted,
    fontSize: 20,
  ))),
  Center(child: Text(text, style: TextStyle(
    decoration: TextDecoration.overline,
    decorationStyle: TextDecorationStyle.dashed,
    fontSize: 20,
  ))),
  Center(child: Text(text, style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.wavy,
    fontSize: 20,
    decorationColor: Colors.green
  ))),
]

import 'package:flutter/material.dart';

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

class TextDemo extends StatefulWidget {
  TextDemo({Key key}) : super(key: key);

  _TextDemoState createState() => _TextDemoState();
}

class _TextDemoState extends State<TextDemo> {
  TextAlign _textAlign = TextAlign.left;
  TextDirection _textDirection = TextDirection.ltr;
  TextOverflow _textOverflow = TextOverflow.visible;
  
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 20),
      child: Column(
        children: <Widget>[
          Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.blue,
                width: 1,
                style: BorderStyle.solid
              )
            ),
            child: Text(
              '踏浪-所谓天才，不过是每一天的积累成才',
              textAlign: _textAlign,
              textDirection: _textDirection,
              maxLines: 1,
              overflow: _textOverflow,
              textScaleFactor: 2,
              style: TextStyle(
                color: Colors.blue,
                backgroundColor: Colors.red
              ),
            ),
          ),
          ListTile(
            title: Text('textAlign'),
            trailing: DropdownButton(
              value: _textAlign,
              items: TextAlign.values.map((value) => DropdownMenuItem(
                child: Text(value.toString().substring('TextAlign.'.length)),
                value: value
              )).toList(),
              onChanged: (newVal){
                if( newVal != null ){
                  setState(() {
                    _textAlign = newVal;
                  });
                }
              },
            )
          ),
          ListTile(
            title: Text('textDirection'),
            trailing: DropdownButton(
              value: _textDirection,
              items: TextDirection.values.map((value) => DropdownMenuItem(
                child: Text(value.toString().substring('TextDirection.'.length)),
                value: value
              )).toList(),
              onChanged: (newVal){
                if( newVal != null ){
                  setState(() {
                    _textDirection = newVal;
                  });
                }
              },
            )
          ),
          ListTile(
            title: Text('overflow'),
            trailing: DropdownButton(
              value: _textOverflow,
              items: TextOverflow.values.map((value) => DropdownMenuItem(
                child: Text(value.toString().substring('TextOverflow.'.length)),
                value: value
              )).toList(),
              onChanged: (newVal){
                if( newVal != null ){
                  setState(() {
                    _textOverflow = newVal;
                  });
                }
              },
            )
          )
        ],
      ),
    );
  }
}