Flutter 常用组件 1

Container  

容器，相当于HTML的DIV

常用属性 

Container(
   100.0,     //宽度
  height: 100.0,    //高度 
  decoration: BoxDecoration( //背景
    color: Colors.blue,  //背景颜色
    border: Border.all(   //边框
        color: Colors.yellow, 
         2.0, 
    ),
    borderRadius: BorderRadius.all(Radius.circular(20)),   //圆角 
  ),
  padding: EdgeInsets.fromLTRB(10, 20, 40, 22), //内边距
  alignment: Alignment.bottomLeft,  //文字位置
  transform: Matrix4.translationValues(100, 0, 0), //显示效果  翻转   放大缩小
  child: Text("Hello World ");      //显示内容子组件
)

 

Text

文本

Text(
  "你在想什么你在想什么你在想什么你在想什么你在想什么你在想什么你在想什么你在想什么你在想什么你在想",
  textAlign: TextAlign.center,  //字体居中
  style: TextStyle(
    fontSize: 16.0,
    color: Colors.red, //颜色
    fontStyle: FontStyle.italic, //倾斜
    fontWeight: FontWeight.bold, //加粗
    decoration: TextDecoration.lineThrough, //中线
    decorationColor: Colors.green,   //中线颜色
    decorationStyle: TextDecorationStyle.dashed,  //中线样式

    letterSpacing: 3.0, //字母间距
    wordSpacing: 2.0 //单词间距(基本不用)
  ),
  overflow: TextOverflow.ellipsis, //超出隐藏
  maxLines: 2, //行数
  textScaleFactor: 1.5, //字体放大倍数
),

Image

图片

网路图片显示

Image.network('https://pics1.baidu.com/feed/96dda144ad345982716b796287eb46aacaef8400.jpeg?token=37dab0c1163ef6ffa54702d512e0d946',
  // alignment: Alignment.bottomLeft,    //居中
  // fit: BoxFit.cover, // 自适应宽高平铺
  // color: Colors.yellow,  //改变背景色
  // colorBlendMode: BlendMode.screen //改变背景色
  repeat: ImageRepeat.repeat   //重复平铺
),

 本地图片

分三步 

第一步创建图片文件夹

images

　　2.0x

　　　　a.png

　　3.0x

　　　　a.png

　　a.png

第二步

打开pubspec.yaml文件，找到assets，填写

assets:

    - images/a.png

    - images/2.0x/a.png

    - images/3.0x/a.png

第三步   使用

Image.asset(
  'images/a.png',
   100,
  height: 100,  
  fit: BoxFit.cover,
),

SizedBox

一般用来控制组件于组件之间的间距

SizedBox(
   10, //宽度
  height: 10 //高度
),

 

 

ListView

基础列表组件

ListView(
  // padding: EdgeInsets.all(10), //内边距
  reverse: false,  //组件方向排序
  scrollDirection: Axis.vertical, //Axis.horizontal 水平列表  Axis.vertical垂直列表
  children: <Widget>[]
)

一般ListView配合可以配合ListTitle使用

 

ListTile(
  leading: Icon(Icons.settings, color: Colors.green, size: 50,), //前图标
  title: Text("一级标题", style: TextStyle(fontSize: 50,),),   //一级标题
  subtitle: Text("二级标题"),   //二级标题
  trailing: Icon(Icons.settings, color: Colors.green),  //尾部图标
)

注:    动态循环可以用 ListView.builder

Icon  

图标组件   Icons会内置一些刚用图标

Icon(Icons.settings, color: Colors.green, size: 50,)