Flutter

一、Text 文本组件

Text(
   title: 'Hello World',
   textAlign: TextAlign.left,
   maxLines: 1, // 最多显示的行数
   overflow: TextOverflow.ellipsis, // clip直接切断，fade溢出部分渐变消失
   style: TextStyle(
      fontSize: 25.0,
      color: Color.fromARGB(255,255,125,125),
      decoration: TextDecoration.underline, // 下划线
      decorationStyle: TextDecorationStyle.solid,    
   )
)

二、Container 容器组件（div）

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
           child:Container(
             child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
             alignment: Alignment.center, // 容器子内容的对齐方式
              500.0,
             height: 400.0,
             color: Colors.lightBlue, // 容器背景色
             padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
             margin: const EdgeInsets.all(10.0),
             decoration:new BoxDecoration( //container 的修饰器，主要的功能是设置背景和边框
                 gradient:const LinearGradient(
                        colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
                  ),
                 border:Border.all(2.0,color:Colors.red)
             ),
           ),
          ),
        ),
      );
  }
}

// Alignment 对齐方式
//bottomCenter:下部居中对齐。
//botomLeft: 下部左对齐。
//bottomRight：下部右对齐。
//center：纵横双向居中对齐。
//centerLeft：纵向居中横向居左对齐。
//centerRight：纵向居中横向居右对齐。
//topLeft：顶部左侧对齐。
//topCenter：顶部居中对齐。
//topRight： 顶部居左对齐。

三、Image组件

1、 加入图片方式：

• Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
• Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
• Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
• Image.memory: 加载Uint8List资源图片,这个我目前用的不是很多，所以没什么发言权。

2、fit属性

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

• BoxFit.contain:全图显示，显示原比例，可能会有空隙。

• BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

• BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

• BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

• BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

3、图片的混合模式

• color：是要混合的颜色，如果你只设置color是没有意义的。
• colorBlendMode:是混合模式，相当于我们如何混合。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            child:new Image.network(
              'http://jspang.com/static/myimg/blogtouxiang.jpg',
              scale:1.0,
            ),
            300.0,
            height:200.0,
            color: Colors.lightBlue,
          ),
          ),
        ),
      );
  }
}

四、ListView列表组件

// 竖向列表
body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    ),
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    )
  ]
 ),

// 横向列表
import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            height:200.0,
            child:new ListView(
              scrollDirection: Axis.horizontal, // 关键代码
              children: <Widget>[
                new Container(
                  180.0,
                  color: Colors.lightBlue,
                ), new Container(
                  180.0,
                  color: Colors.amber,
                ), new Container(
                  180.0,
                  color: Colors.deepOrange,
                ),new Container(
                  180.0,
                  color: Colors.deepPurpleAccent,
                ),
              ],
            )
          ),
          ),
        ),
      );
  }
}