Flutter 基础控件

墨蓝 2021-12-13 14:13 234阅读 0赞

### 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或Column来实现相同的结果。

@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'),
        ],
      );
    }

参考 [https://www.cnblogs.com/nesger/p/10469053.html][https_www.cnblogs.com_nesger_p_10469053.html]

转载于:https://www.cnblogs.com/suiyilaile/p/10981572.html

[https_www.cnblogs.com_nesger_p_10469053.html]: https://www.cnblogs.com/nesger/p/10469053.html