Flutter学习笔记（11）--文本组件、图标及按钮组件

如需转载，请注明出处：flutter学习笔记（10）--容器组件、图片组件

上一篇flutter学习笔记（9）--组件widget我们说到了在flutter中一个非常重要的理念"一切皆为组件"，在flutter中，所有的元素皆由组件组成，比如说我们常用的文本、图片、按钮、动画等等，接下来说一下在flutter中最常用到的几类组件。

• 容器组件

容器组件（container）可以理解为在android中的relativelayout或linearlayout等，在其中你可以放置你想布局的元素控件，从而形成最终你想要的页面布局。当然flutter中的容器组件作为一个"容器"，肯定会有一些给我们提供一些属性来约束我们容器内的组件，下面介绍一下容器组件（container）的一些常用属性及描述：

属性名	类型	说明
key	key	container唯一标识符，用于查找更新
alignment	alignmentgeometry	控制child的对其方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会生效，有很多种对齐方式
padding	edgeinsetsgeometry	decoration内部的空白区域，如果有child的话，child位于padding内部
color	color	用来设置container背景色，如果foregrounddecoration设置的话，可能会遮盖color效果
decoration	decoration	绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置
foregrounddecoration	decoration	绘制在child前面的装饰
width	double	container的宽度，设置为double.infinity可以强制在宽度上撑满
height	double	container的高度，设置为double.infinity可以强制在高度上撑满
constraints	boxconstraints	添加到child上额外的约束条件
margin	edgeinsetsgeometry	围绕在decoration和child之外的空白区域，不属于内容区域
transform	matrix4	设置container的变换矩阵，类型为matrix4
child	widget	container中的内容widget

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注：padding和margin的区别在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。

写一个简单的例子，体验一下容器组件container，主要是加了一个边框及底色，示例代码如下：

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return materialapp(
      title: '容器组件demo',
      home: scaffold(
        body: center(
          child: container(
            width: 200,
            height: 200,
            //添加边框装饰效果
            decoration: boxdecoration(
              color: colors.blue,
              border: new border.all(
                width: 10, //边框粗细
                color: colors.amberaccent //边框颜色
              ),
              borderradius: const borderradius.all(const radius.circular(5)) //边框圆角
            ),
            child: text(
              'flutter container demo',
              textalign: textalign.center,
              style: textstyle(fontsize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

 

　页面截图如下：

讲解一下上面的代码，其实很简单，就是在body内放置了一个container组件和一个text组件，给容器组件container设置的宽、高、背景色、边框、边框圆角、边框的粗细以及边框的颜色，然后在容器container内放了一个text组件，并设置的text的对齐方式以及字体大小。

看到页面可能有人会问，为什么这个容器会在页面的正*呢？这是因为body的内容设置的属性为center居中。

简单说几点属性的可选值比如textalign（文本的对齐方式）、borderradius（圆角）、textstyle（字体样式），最直接的还是让大家看一下截图，如下：

大家可以从提示中看到，textalign（文本的对齐方式）有左对齐、右对齐、居中等等，borderradius（圆角）有对右上、左上、右下、左下单独设置圆角的属性，textstyle（字体样式）有颜色、大小、行高、阴影、粗细等等属性，这里我们就不一一说明了，感兴趣的同学可以自己尝试一下。

container小结：

说实话这也是我第一次开始用flutter写一个简单的界面demo，作为一个android程序员来讲，感觉不是很习惯，好在我有weex的开发经历，写过很多vue的页面，其实在flutter里面写页面就是一层一层的child嵌套，用无数个child堆积出一个页面，现在写的demo很简单，不知道以后页面复杂了，会不会把自己嵌套懵了.......

• 图片组件

图片组件（image）是显示图像的组件，image组件有多种构造函数

　　1.new image：从imageprovider获取图像

　　2.new image.asset：加载资源图片

　　3.new image.file：加载本地图片文件

　　4.new image.newwork：加载网络图片

　　5.new image.memory：加载uint8list资源图片

 

image组件属性及描述

属性	类型	说明
image	imageprovider	抽象类，需要自己实现获取图片数据的操作
width/heyght	double	image显示区域的宽度和高度，这里需要把image和图片两个东西区分开，图片本身有大小，image width是图片的容器，本身也有大小，宽度和高度的配置通常和fit属性配合使用
fit	boxfit	图片填充模式，具体取值见下一个表
color	color	图片颜色
colorblendmode	blendmode	在对图片进行手动处理的时候，可能用到图层混合，如改变图片的颜色。此属性可以对颜色进行混合处理。
alignment	alignment	控制图片的摆放位置，比如图片放置在右下角则为alignment.bottomright
repeat	imagerepeat	此属性可以设置图片的重复模式，norepeat为不重复，repeat为x和y方向重复，repeatx为x方向重复，repeaty为y方向重复
centerslice	rect	当图片需要被拉伸显示时，centerslice定义的举行区域会被拉伸，可以理解成我们在图片内部定义一个9个点文件用作拉伸，9个点为上、下、左、右、上中、下中、左中、右中、正中
matchtextdirection	bool	matchtextdirection和directionality配合使用，textdirection有两个值，分别为textdirection.ltr从左向右展示图片与textdirection.rtl从右向左展示图片
gaplessplayback	bool	当imageprovider发生变化后，重新加载图片的过程中，原图片的展示是否保留，值为true则保留，值为false则不保留，直接空白等待下一张图片加载

 

boxfit取值及描述

取值	描述
boxfit.fill	全图显示，显示可能拉伸，充满
boxfit.contain	全图显示，显示原比例，不需充满
boxfit.cover	显示可能拉伸，可能裁剪，充满
boxfit.fitwidth	显示可能拉伸，可能裁剪，宽度充满
boxfit.fitheight	显示可能拉伸，可能裁剪，高度充满
boxfit.none	原始大小
boxfit.scaledown	效果和boxfit.contain差不多，但是此属性不允许显示超过源图片大小，即可小不可大

 

 

 

 

 

 

 

 

 

 

 

 

按照惯例附上一段demo：

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return materialapp(
      title: '图片组件demo',
      home: new center(
        child: container(
          color: colors.white,
          child: new image.network(
            'https://flutter.io/images/homepage/header-illustration.png',
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

 

按照惯例附上效果截图：

上面可以看出，我给从网络上获取的图片设置的宽、高分别为200，但是我并没有设置图片的填充模式，那么我把填充模式设置为fitheight会怎么样呢？

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget{
  @override
  widget build(buildcontext context) {
    return materialapp(
      title: '图片组件demo',
      home: new center(
        child: container(
          color: colors.white,
          child: new image.network(
            'https://flutter.io/images/homepage/header-illustration.png',
            width: 200,
            height: 200,
            fit: boxfit.fitheight,
          ),
        ),
      ),
    );
  }
}

 

 

 可以看的出来，高度充满了，但是水平方向被拉伸了。

其他的图片属性以及填充方式的属性，我就不一一给大家演示了，我尝试了很多种组合，发现还挺有意思的，希望大家也能多多的进行尝试！

 

下一章节：flutter学习笔记（11）--文本组件、图标及按钮组件