flutter基础之基础控件Container与Text

 一:布局Container详解

Container在Flutter中太常见了。官方给出的简介，是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。它是一个组合的widget，内部有绘制widget、定位widget、widget尺寸。

构造函数如下：

  Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

使用方法

  body: new Container(
          constraints: new BoxConstraints.expand(
            height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 300.0,
          ),
          alignment: Alignment.center, //子元素child的对齐位置
          padding: const EdgeInsets.all(1.0), //内边距
          margin: const EdgeInsets.all(2.0),  //外边距
//          color: Colors.yellow, //container背景色 不能与decoration共同使用
          width: 400.0, //宽度
          height: 200.0,  //高度   设置为double.infinity
          child:new Text("我是内容",
            textAlign: TextAlign.start,
            style: new TextStyle(color: Colors.black ,//字体颜色
              fontSize: 17.0,//字体大小
            ),) ,
            decoration: new BoxDecoration(// 绘制在child后面的装饰底色或者背景图片
              border: new Border.all(width: 2.0, color: Colors.red), //边框
              color: Colors.yellow,   //背景
              borderRadius: new BorderRadius.all(new Radius.circular(20.0)),  // 圆角
              image: new DecorationImage(
                image: new NetworkImage(""),//设置底图  NetworkImage加载网络图片连接
                centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
              ),
            ),

          foregroundDecoration: new BoxDecoration(//绘制在child前面的装饰 比如蒙板
            border: new Border.all(width: 2.0, color: Colors.red), //边框
            color: Colors.white24,   //背景
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),  //
            image: new DecorationImage(
              image: new NetworkImage(""),
            ),
          ),
//          transform: new Matrix4.rotationZ(0.3),//设置container的变换矩阵，类型为Matrix4
        ),

二，Text，很常用的一个Widget，当成一个文本控件

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

其中style
文本的样式

const TextStyle({
    this.inherit = true,
    this.color, //字体颜色
    this.fontSize,//字体大小
    this.fontWeight,  //字体厚度，也就是字体粗细
    this.fontStyle, //normal或者italic
    this.letterSpacing, //字母间隙
    this.wordSpacing, //单词间隙
    this.textBaseline, // 文本绘制基线
    this.height,  //高度
    this.locale, //区域设置
    this.foreground,//
    this.background,
    this.decoration,  //文字装饰(none/underline/overline/lineThrough)
    this.decorationColor, //文字装饰的颜色
    this.decorationStyle, //文字装饰的风格(solid/double/dotted/dashed/wavy)
    this.debugLabel,
    String fontFamily,  //字体
    String package,
  })

Text使用

 child: new Text("hello world",
    textAlign: TextAlign.right, 
 textDirection: TextDirection.rtl,//文本方向
 softWrap: false,//是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
overflow: TextOverflow.ellipsis,//当文字超出屏幕的时候，如何处理 TextOverflow.clip(裁剪) 等  TextOverflow.fade(渐隐)
 textScaleFactor: 2.0, //字体显示倍率，
  maxLines: 2, //最大行数设置

    style: new TextStyle(  
   color: Colors.purple,
     //color颜色    
   fontSize: 40.0,
        //字体大小
 fontWeight: FontWeight.w800，//fontWeight粗细
wordSpacing: 30.0，//单词间距
fontStyle: FontStyle.italic，// //fontStyle斜体
textBaseline: TextBaseline.ideographic，
 decoration: TextDecoration.lineThrough,
    decorationStyle: TextDecorationStyle.wavy
  )
    
)