Flutter 基礎控件

1 Text

 Text(
       "Hello Flutter",
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        textAlign: TextAlign.left,
        style: TextStyle(
                  fontSize: 12.0,
                  color: Color.fromARGB(255, 100, 100, 150),
                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.solid),
   )

2 Image

2.1 幾種加入形式

• image.asset //資源圖片
• image.network('image.url',scale:2.0) //網絡圖片 scale:縮放到1/2倍
• image.file //本地圖片

2.2 fit屬性
fit:BoxFit.Fill //拉伸圖片 填滿容器
fit:BoxFit.container //縮放圖片徹底顯示，可能不填滿容器
fit:BoxFit.width //
fit:BoxFit.cover //裁切 填滿容器

3 ListView 組件的使用

List<String> items;
new ListView.builder(
　　 scrollDirection:Axis.horizontal //橫向列表
    itemCount:items.length,
    itemBuilder:(Context,index){
    return new ListTile(
        title:new Text('$items[index]')
    )}
    )

4 GridView的使用

GridView.count(
    padding:const EdgeInsets.fromLTRB(10.0,10.0,10.0),
    crossAxisSpacing:10.0,//縱軸方向子元素的間距
    crossAxisCount:3,//縱軸子元素的數量
    children:<widget>[

    ]
)

5 Container

container(
    child:new text('hello world',style:TextStyle(fontsize:40.0)),
    alignment:Alignment.center,//對齊方式
    width:500.0,
    height:400.0,
    color:Color.lightblue,
    padding:const EdgeInsets.fromLTRB(10.0,10.0,10.0),
    marging:const EdgeInsets.all(10.0),
)

6 Sizebox 

代替margin值

SizedBox(
          height: 20.0,
        )

7 GestureDetector 點擊事件

class ContainerClick extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: (){
        print("click");
      },
      child: Row(
        children: <Widget>[
          Image.network("url"),
          Text("收藏"),
        ],
      ),
    );
  }
}

8 column  & row

在Android中，使用LinearLayout來使您的控件呈水平或垂直排列。在Flutter中，您可使用Row或Co​​lumn來實現相同的結果。

@override
Widget build(BuildContext context) {
  return new Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      new Text('Row One'),
      new Text('Row Two'),
      new Text('Row Three'),
      new Text('Row Four'),
    ],
  );
}

 

@override
Widget build(BuildContext context) {
  return new Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      new Text('Column One'),
      new Text('Column Two'),
      new Text('Column Three'),
      new Text('Column Four'),
    ],
  );
}

 

參考 http://www.javashuo.com/article/p-ycuvjzzm-cz.html