Flutter中的基础组件之一

一、Text文本组件(单一格式的文本)

  是具有单一风格的文本字符串,可以跨多行显示,也可全部显示在同一行中,具体显示样子,取决于布局约束。

  常用属性:

    1.overflow : TextOverflow.values 处理文本溢出,可选值有:

       Flutter中的基础组件之一_第1张图片

      clip:剪切溢出的文本;

      ellipsis:用省略号代替溢出部分文本;

      fade: 是将溢出的文本淡入透明;

      visible:显示溢出文本。

      若不设置overfl属性,则默认为clip属性,即剪切溢出的文本。

    2.textAlign:TextAlign.values 文本水平对齐样式,可选个样式有:

      Flutter中的基础组件之一_第2张图片

       center : 水平居中对齐;

      end:在容器的后沿上对齐文本;对于从左到右的文本,是右边缘。对于从右到左的文本,是左边缘。

      start:将文本对齐容器的前边缘;对于从左到右的文本,是左边缘;对于从右到左的文本,是右边缘。

      justify:向文本两端对齐;

      left:向容器的左边缘对齐。

      right:向容器的右边缘对齐文本。

    3.style: TextStyle(values)  如果不为null,则为该文本使用的样式。常用属性右:

      backgroundColor: 背景颜色设置。

      color:字体颜色设置。

      textDirecrion:TextDirection :在文本附近绘制的线性装饰,上划线(overline)、下划线(underline )、文字中划线(lineThrough);

      fontFamily :设置字体;

      fontSize :设置字体大小;

      fontStyle:设置字体样式,例如斜体;

      fontWeight :设置字体粗细;

      wordSpacing:设置单词间距;

      letterSpacing:设置字母之间的间距; 

二、Container(容器控件)是Flutter中经常使用的控件,就相当于HTML中的div标签一样,每个页面或者视图都离不开它。常用属性:

 

      alignment:Alignment 常用选项,各个属性可以顾名思义。  

        Flutter中的基础组件之一_第3张图片

        bottomCenter:下部居中对齐。

        botomLeft: 下部左对齐。

        bottomRight:下部右对齐。

        center:纵横双向居中对齐。

        centerLeft:纵向居中横向居左对齐。

        centerRight:纵向居中横向居右对齐。

        topLeft:顶部左侧对齐。

        topCenter:顶部居中对齐。

        topRight: 顶部居左对齐。

 

      width ,height,color 属性 设置宽、高和颜色属性是相对容易的,只要在属性名称后面加入浮点型数字就可以了,比如要设置宽是100,高是100,颜色为亮蓝色。代码如下:

        width: 1000.0,

        height: 100.0,

               color: Colors.lightBlue,
       padding和margin属性
       padding: const EdgeInsets.fromLTRB(10.0,0,10.0,0),(LTRB,代表左上右下,是个方向)
        margin: const EdgeInsets.all(10.0),(All代表所有方向),
      

      decoration属性(需要注意的是如果你在decoration设置了color相关的属性,就不要再设置color属性了,因为这样会冲突

        border: Border.all(width: 1.0,color: Colors.redAccent,) (边框属性)

 

三、Image图片组件

   image载入的4中方式:        

    Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。

    Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。

    Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。

    Image.memory: 加载Uint8List资源图片。

   

  fit属性的设置:(fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的)

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

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

    BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。

    BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。

    BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。

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

  

  repeat属性设置:

    ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。

    ImageRepeat.repeatX: 横向重复,纵向不重复。

    ImageRepeat.repeatY:纵向重复,横向不重复。

  上述事例代码:

    child: new Image.network(

              'https://static.cnblogs.com/images/adminlogo.gif',
              repeat: ImageRepeat.noRepeat,
              fit: BoxFit.contain,

    ),

 

你可能感兴趣的:(Flutter中的基础组件之一)