Flutter组件学习一（Text、Container）

1、Text

名称	功能
textAlign	文本对齐方式(center 居中，left 左 对齐，right 右对齐，justfy 两端对齐)
textDirection	文本方向(ltr 从左至右，rtl 从右至 左)
overflow	文字超出屏幕之后的处理方式(clip 裁剪，fade 渐隐，ellipsis 省略号)
textScaleFactor	字体显示倍率
maxLines	文字显示最大行数
style	字体的样式设置

TextStyle 中的参数：

名称	功能
decoration	文字装饰线(none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线)
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格([dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线)
wordSpacing	单词间隙(如果是负值，会让单词变得更紧凑
letterSpacing	字母间隙(如果是负值，会让字母变得更紧凑)
fontStyle	文字样式(italic 斜体，normal 正常体)
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细(bold 粗体，normal 正常体)

实例代码

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

class MyMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "test",
        home: new Scaffold(
          // 设置title
          appBar: AppBar(title: Text("jeklsjflk")),
          body: MyView(),
        ));
  }
}


// Text 的基本使用
class MyView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var text = "测试数据九分裤老地方角度来看fjkldfjdslkfjal;fjdklfjdslkfjdsklfjsdflkdsjf";
    return Text(
      // 要显示是文字
      text,
      style: TextStyle(
          color: Colors.yellow,
          fontStyle: FontStyle.normal,
          fontSize: 14, fontWeight: FontWeight.normal),

      textAlign: TextAlign.right,
      overflow: TextOverflow.clip,
    );
  }
}

2、Container

名称	功能
alignment	topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 centerRight:垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft:底部居左对齐 bottomRight:底部居右对齐
decoration	decoration: BoxDecoration( color: Colors.blue, border: Border.all(color: Colors.red, width: 2.0,), borderRadius: BorderRadius.all(Radius.circular(8.0) )
margin	margin 属性是表示 Container 与外部其他 组件的距离。 EdgeInsets.all(20.0),
padding	padding 就是 Container 的内边距，指 Container 边缘与 Child 之间的距离 padding: EdgeInsets.all(10.0)
transform	让 Container 容易进行一些旋转之类的transform: Matrix4.rotationZ(0.2)
height	容器高度
width	容器宽度
child	容器子元素

更多找文档 https://api.flutter.dev/flutter/widgets/Container-class.html

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

class MyMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "test",
        home: new Scaffold(
          // 设置title
          appBar: AppBar(title: Text("jeklsjflk")),
          body: MyContainer(),
        ));
  }
}

///自定义的Container
class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      /// 四周10大小的margin
      margin: EdgeInsets.all(10.0),

      height: 120,
      width: 500,

      ///透明黑色遮罩
      decoration: new BoxDecoration(

        ///弧度为4.0
          borderRadius: BorderRadius.all(Radius.circular(4.0)),

          ///color: Colors.black.withAlpha(20),
          ///设置了decoration的color，就不能设置Container的color。
          color: Colors.black,

          ///边框
          border: new Border.all(color: Colors.red, width: 0.3)),
      child: new Text(
        "fjdklfdjlfkd",
        //设置字体样式：颜色灰色，字体大小14.0
        style: new TextStyle(color: Colors.white, fontSize: 14.0),
      ),
    );
  }