开发者社区> ws5ztcvob2aao> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Flutter(四)——基础组件

简介: Flutter(四)——基础组件
+关注继续查看

前言


你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLayout,RelativeLayout等,你也一定和博主一样写过很多自定义控件,如果你学过Kotlin,并且用XML的DSL框架Anko声明Android组件,你会发现这与Flutter那种嵌套布局写法极为相似,下面是整个Flutter布局图:

image

我们将通过几篇博文讲述一些Flutter布局,对齐方式以及使用场景,下面我们开始学习基础组件。


基础组件


基础组件是组件的鼻祖,flutter必须要掌握的知识。在组件的划分上,Container,Row,Column都属于基础组件。但是Container又属于单一子元素组,而Row,Column又属于多子元素组件。


Text

Text组件,相当于Java开发Android时的TextView,基本的使用代码如下:

Text("hello world");

顾名思义,就是专门输出基本文字的控件,不过,这样使用肯定会很单调,毕竟Java开发Android时的文本控件又非常多的玩法,比如跑马灯等等,同样我们Flutter中也可以通过各种样式定义出来更多的Text玩法,博主专门列了一个表格,详细说明它的常用属性。

属性

数值

textAlign

对齐方式

maxLines

最大行数

textScaleFactor

缩放因子,默认值为1.0

overflow

配合maxLines使用,超出最大行数时,可以用省略号或渐变效果隐藏多余行数

style

TextStyle对象,其属性又color,fontFamily,background,fontSize,下划线等
textSpan配置Text.rich使用,被包装成RichText,可实现类似富文本的效果

其中常用的属性就是style,textAlign以及maxLines和overflow组合使用,比如在一个详情列表里面,内容太长就可以使用后一种组合方式。


常用属性使用

比如这里,我们先使用maxLines和overflow的组合使用,代码如下:

Text(
    'You have pushed the button this many times:You have pushed the button this many times:You have pushed the button this many times:You have pushed the button this many times:',
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
),


这里设置文本最大行数为一行,但其实文字非常长,已经超出了范围,所以,我们设置overflow,让它将多余的内容用省略号显示:

image

接着,我们在使用样式style,和textAlign,代码如下:

Text(
    'You have',
    maxLines: 1,
    style: TextStyle(
    fontSize: 33,
    fontStyle: FontStyle.italic,
    color: Color.fromARGB(255, 123, 233, 188)),
    textAlign: TextAlign.center,
    overflow: TextOverflow.ellipsis,
),


这里我们设置了文字的各种style,比如设置文字大小33,样式为斜体,颜色随便设置了一个ARGB值,也设置了文字居中显示,效果如下:

image

其他属性,需要使用时,查询文档就行,不需要死记硬背,对于Text,博主这里就讲到这里,下面我们将介绍另一个基础组件Icon。


Icon

从名字我们就知道,这是一个图标,在Android系统中支持系统自带的图标,mipmap存放的就是Icon类型图片,使用的方式如下:

Icon(Icons.search,color: Colors.red,),

这里设置了图标的样式为搜索框样式,设置搜索框图标的颜色为红色,显示的效果如下:

image

内置的Icon系统图标其实有很多种类,如下图所示,这里就不多做讲解,后续需要使用,可以对应选择自己需要的图标:

image

备注:这些系统自带的图标,全部都是矢量图标,不管放大或者缩小,都不会和像素图片一样失真,所以可以放心大胆的随意使用,如果这些图标都不能满足你的需求,可以去阿里妈妈的适量图标字体库选择。


Image

在使用Java开发Android项目的时候,我们经常用到ImageView控件,flutter给我们也提供了类似的组件Image,我们先来看看基本的使用方式:

Image(image: AssetImage("images/timg.gif"),width: 200,),

这里使用起来也是很简单,直接引用你的资源文件图片文件,而且flutter的Image可以直接显示动图,而Java开发的ImageView就不行,这一点来看,flutter真心很强大,显示效果如下:

image

当然你如果直接把代码复制到你的项目中,直接使用肯定不行,因为flutter需要将引用的图片配置到pubspec.yaml文件中才能使用,代码如下:

flutter:
  assets:
    - images/timg.gif


所有从引用的非系统资源,都需要在这里进行声明。当然我们还可以直接引用网络中的图片直接显示,代码如下:

Image(image: NetworkImage("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1888248698,138867488&fm=26&gp=0.jpg"),width: 200,),


除了上述两种方式之外,图片还支持通过Image.file和Image.memory的方式进行加载。可以看出,图片的加载方式有很多途径,可以是本地,网络,内存,文件等,而每种方式都继承了各自的ImageProvider。


Button

Button就是按钮。Flutter中常用的按钮有以下几种:RaisedButton,FlatButton,IconButton,FloatingActionButton,OutlineButton等。当然,我们也可以根据实际情况进行按钮的自定义,我们先来看看如何使用Button,代码如下:

RaisedButton(
    color: Colors.blue,
    child: Text("波纹效果按钮"),
    textColor: Colors.white,
    onPressed: ()=>{},
),
FlatButton(
    textColor: Colors.blue,
    child: Text("扁平无背景按钮"),
    onPressed: (){
        print("FlatButton");
    },
),
OutlineButton(
    textColor: Colors.blue,
    child: Text("边框背景高亮按钮"),
    onPressed: (){
       print("OutlineButton");
},
),


代码其实很简单,这里不需要多做讲解,至于FloatingActionButton,默认项目又下角一直都有,IconButton就是可以点击的Icon,这里也不多赘述,上述代码实现效果如下图所示:

image


FlutterLogo

顾名思义,这就是一个Flutter的Logo,基础的使用方式如下:

FlutterLogo(
    size: 100.0,
    colors: Colors.red,
),


显示的效果如下图所示,不过这个控件可能用的很少:

image

不过这个Logo还是有一个小的用途,那就是拿它做占位图,毕竟开发项目时,更新图片比较费时,拿这个图先用一下,项目测试没问题后,在把这个Logo更换为具体的图片。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter组件使用技巧(一)
Flutter组件使用技巧(一)
0 0
Flutter | 布局组件(下)
Flutter | 布局组件(下)
0 0
Flutter | 布局组件(上)
Flutter | 布局组件(上)
0 0
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
0 0
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
0 0
Flutter(五)——单一子元素组件(二)
Flutter(五)——单一子元素组件(二)
0 0
Flutter(五)——单一子元素组件(一)
Flutter(五)——单一子元素组件(一)
0 0
Flutter教程 — 基础组件(下)
Flutter的几个基础组件(下)
0 0
【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )(一)
【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )(一)
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Flutter企业级应用开发实战手册
立即下载
Flutter技术解析与实战
立即下载
Flutter in action
立即下载