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:double.infinity,//宽度铺满
    height:400.0,
    color:Color.lightblue,
    padding:const EdgeInsets.fromLTRB(10.0,10.0,10.0),
    marging:const EdgeInsets.all(10.0),

    decoration: new BoxDecoration(
    border: new Border.all(width: 1.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(8.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'),
    ],
  );
}

 9 底部弹窗

showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container（height:200）;
    });

　　

参考 https://www.cnblogs.com/nesger/p/10469053.html