Flutter--基础组件

Flutter 万物皆组件

Text

属性	释义
textAlign	文本对齐方式
maxLines	最大行数
textScaleFactor	字体显示倍率，默认值为10
overflow	配合maxLines使用，超出最大行数可以用省略号或渐变效果
style	TextStyle对象
textSpan	实现类似富文本

TextStyle参数

属性	释义
decoration	文字装饰线（none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线）
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格
wordSpacing	单词间隙，负值让单词更加紧凑
letterSpacing	字母间隙，负值让字母更紧凑
fontStyle	文字样式（italic 斜体，normal 正常体）
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细

return MaterialApp(
  title: "Startup Name Generator",
  home: new Scaffold(
    appBar: new AppBar(
      title: new Text("Text"),
    ),
    body: new Center(
      child: new Text(
          "hello",
      textAlign: TextAlign.center,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: new TextStyle(
        decorationColor: Color(0xff123FFF),
        decoration: TextDecoration.underline,
        fontSize: 20,
        color: Color(0xFFFFD700)
      ),),
    ),
  ),
);

Icon

body: new Center(
  child: new Icon(
    Icons.build,
    color: Colors.red,
    semanticLabel: "user",
    size: 64,
    textDirection: TextDirection.rtl,
  ),
),

Image

方法	释义
Image.asset(String name)	从AssetBundler中获取图片
Image.network(String src)	从网络中获取图片
Image.file(File file)	从File中获取图片
Image.memory(Unit8List butes)	从Unit8List中获取图片

属性	释义
alignment	图片对齐方式
color和colorBlendMode	设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，这样可以是图片颜色和背景色混合
fit	fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的
repeat	平铺
width	宽度，一般结合 ClipOval 才能看到效果
height	高度，一般结合 ClipOval 才能看到效果

return Center(  
    child: Container(  
          child: Image.network( "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg", 
           alignment: Alignment.topLeft, 
           color: Colors.red, 
           colorBlendMode: BlendMode.colorDodge, 
           // repeat: ImageRepeat.repeatX, 
           fit: BoxFit.cover, ), 
           width: 300.0, 
           height: 400.0, 
           decoration: BoxDecoration(  
                color: Colors.yellow  
           ), 
      ), 
 );

// 获取网络图
child: new Image(image: 
NetworkImage("https://www.baidu.com/img/bd_logo1.png?where=super"),width: 50,)

// 获取本地文件夹图片
1. 新建images文件夹，并将图片放于该文件夹下
2. 在pubspec.yaml声明以下添加的图片文件
flutter:  
    uses-material-design: true
assets: 
    - images/1.jpg

child: Container(  
    child: Image.asset("images/a.jpeg", 
    fit:BoxFit.cover  
    ),
    width: 300.0, 
    height: 300.0, 
    decoration: BoxDecoration(  
        color: Colors.yellow  
    ),
 ),,

Image实践 – 实现圆角图片

Widget build(BuildContext context) {
  return Center(
    child: Container(
      width: 300.0,
      height: 300.0,
      decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
            image: new NetworkImage("url"),
            fit: BoxFit.cover,
          )),
    ),
  );
}

实现圆形图片

return Center(
  child: Container(
      child: ClipOval(
    child: Image.network(
      "",
      width: 150.0,
      height: 150.0,
    ),
  )),
);

Button

child: RaisedButton(
  color:Colors.blue,
  child: Text("RaisedButton"),
  textColor: Colors.white,
  onPressed: () => {},
),