Skip to main content

Container Text Image Iconfont

Container 容器组件​

属性类型含义
alignmentAlignmenttopCenter : 顶部居中对齐
topLeft : 顶部左对齐
topRight : 顶部右对齐
center : 水平垂直居中对齐
centerLeft :垂直居中水平居左对齐
centerRight : 垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft : 底部居左对齐
bottomRight :底部居右对齐
decorationBoxDecorationdecoration : BoxDecoration( color: Colors.blue, border: Border.all( color:Colors.red, width: 2.0))
borderRadius: BorderRadius.circular((8)) // 圆角
boxShadow : BoxShadow( color: Colors.blue, offset: Offset(2.0, 2.0),blurRadius: 10.0, )
LinearGradient : 背景线性渐变
RadialGradient : 径向渐变
eg： radient : LinearGradient( colors: [Colors.red, Colors.orange], )
marginEdgeInsetsmargin 属性是表示 Container 与外部其他组件的距离。
EdgeInsets.all(20.0)
paddingEdgeInsetspadding 就是 Container 的内边距，指 Container 边缘与 Child 之间的距离 padding:EdgeInsets.all(10.0)
transformMatrix4让 Container 容易进行一些旋转之类的 transform: Matrix4.rotationZ(0.2)
height容器高度
width容器宽度
child容器子元素

Text 文本组件​

属性类型含义
textAlignTextAlign文本对齐方式: center居中，left左对齐，right右对齐，justfy两端对齐
textDirection文本方向: ltr从左至右，rtl从右至左
overflowTextOverflow文字超出屏幕之后的处理方式: clip裁剪，fade渐隐，ellipsis省略号
textScaleFactordouble字体显示倍率
maxLinesInt文字显示最大行数
style字体的样式设置

TextStyle 的参数:

属性类型含义
decorationBoxDecoration文字装饰线: none没有线，lineThrough删除线，overline上划线，underline下划线
decorationColor文字装饰线颜色
decorationStyle文字装饰线风格: [dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线
wordSpacing单词间隙: 如果是负值，会让单词变得更紧凑
letterSpacing字母间隙: 如果是负值，会让字母变得更紧凑
fontStyle文字样式（italic斜体，normal正常体）
fontSize文字大小
color文字颜色
fontWeight字体粗细（bold粗体，normal正常体）

图片组件​

  • 可以通过 Image 组件来加载并显示图片 Image 的数据源可以是 asset 、文件 、内存 以及 网络 。
    • Image.asset 本地图片
    • Image.network 远程图片

Image 组件的常用属性:

属性类型含义
alignmentAlignment图片的对齐方式
color 和 colorBlendMode设置图片的背景颜色，通常和colorBlendMode配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
fitBoxFitfit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。
BoxFit.fill :全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain :全图显示，显示原比例，可能会有空隙。
BoxFit.cover ：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。 BoxFit.fitWidth ：宽度充满（横向充满），显示可能拉伸，可能裁切。 BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown ：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat平铺ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX : 横向重复，纵向不重复。
ImageRepeat.repeatY : 纵向重复，横向不重复。
widthInt 或 Dobble宽度 一般结合 ClipOval 才能看到效果
heightInt 或 Dobble高度 一般结合 ClipOval 才能看到效果
tip

更多属性参考：https://api.flutter.dev/flutter/widgets/Image-class.html

加载远程图片​

Image.network(
    "https://www.au-sonpo.co.jp/common/img/id0026.jpeg",
    fit: BoxFit.cover,
),

Container 实现圆形图片​

Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(75),
        image: const DecorationImage(
            image: NetworkImage(
                "https://www.au-sonpo.co.jp/common/img/id0026.jpeg",
            ),
            fit: BoxFit.cover
        )
    ),
),

ClipOval 实现圆形图片​

Center(
    child: ClipOval(
        child: Image.network(
            "https://www.au-sonpo.co.jp/common/img/id0026.jpeg",
            width: 150.0,
            height: 150.0,
            fit: BoxFit.cover
        ),
    ),
);

CircleAvatar 实现圆形图片​


const CircleAvatar(
    radius: 200,
    backgroundImage:
    NetworkImage("https://www.au-sonpo.co.jp/common/img/id0026.jpeg"),
)

注意

基本上，CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中，以创建类似于边框的内容。

const CircleAvatar(
    radius: 110,
    backgroundColor: Color(0xffFDCF09),
    child: CircleAvatar(
        radius: 100,
        backgroundImage: NetworkImage("https://www.au-sonpo.co.jp/common/img/id0026.jpeg"),
    )
)

加载本地图片​

  1. 项目根目录新建images文件夹,images中新建 2.0x 3.0x 对应的文件
  2. 然后，打开 pubspec.yaml 声明一下添加的图片文件， 注意: 空格
assets:
    - images/a.jpeg
    - images/2.0x/a.jpeg
    - images/2.0x/a.jpeg
ClipOval(
    child: Image.asset(
        "images/a.jpeg",
        width: 150.0,
        height: 150.0,
        fit: BoxFit.cover
    ),
),

图标组件​

官方Icons图标​

Material Design 所有图标可以在其官网查看：https://material.io/tools/icons/

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Center(
            child: Column(
                children: const [
                    Icon(Icons.search,color: Colors.red,size: 40),
                    SizedBox(height: 10),
                    Icon(Icons.home),
                    SizedBox(height: 10),
                    Icon(Icons.category),
                    SizedBox(height: 10),
                    Icon(Icons.shop),
                    SizedBox(height: 10),
                ],
            )
        );
    }
}

阿里巴巴图标库自定义字体图标​

tip

我们也可以使用自定义字体图标。阿里巴巴图标库官网 iconfont.cn 上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在 Flutter 中，我们使用 ttf格式 即可。

  • 假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：

    1. 导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf":

      可以配置单个字体文件

      fonts:
          - family: MyIcon # 指定一个字体名
              fonts:
              - assets: fonts/iconfont.ttf

      也可以配置多个字体文件
      fonts:
          - family: myIcon #指定一个字体名
          fonts:
              - asset: fonts/iconfont.ttf
          - family: alipayIcon #指定一个字体名
          fonts:
              - asset: fonts/iconfont2.ttf

    2. 为了使用方便，我们定义一个 MyIcons 类，功能和 Icons 类一样：将字体文件中的所有图标都定义成静态变量：

      class MyIcons{
          // book 图标
          static const IconData book = IconData(
              0xe614,
              fontFamily: 'myIcon',
              matchTextDirection: true
          );
          // 微信图标
          static const IconData wechat = IconData(
              0xec7d,
              fontFamily: 'myIcon',
              matchTextDirection: true
          );
      }

    3. 使用

      Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
              Icon(MyIcons.book,color: Colors.purple),
              Icon(MyIcons.wechat,color: Colors.green),
          ],
      )