Day06 - Flutter 常用的基础 Widget（上）-阿里云开发者社区

概述：

Text 文本
Icon图标及按钮Button组件
Image 图片组件
TextField 输入框

一、文本 Widget

1.1、Text 文本组件的概述
文本组件(Text) 负责文本和定义显示样式，常用属性如下表

属性名	类型	默认值	说明
data	String		数据为要显示的文本
maxLine	int	0	文本显示的最大行数
style	TextStyle	null	文本样式，可定以文本的字体大小，颜色，粗细等等
textAlign	TextAlign	TextAlign.center	文本水平方向对齐方式，取值有 center、end、justify、left，right、start、values
textDirection	TextDirection	TextDirection.ltr	文本书写的方向，默认是从左到右
textScaleFactor	double	1.0	字体的缩放系数
textSpan	TextSpan	null	文本块，TextSpan 里面可以放文本的内容和样式
overflow	TextOverflow		文本放不下的益处方式

1.2、基本的 Text 例子，更多的属性我们可以点击 Text 进去看看

Text(
   "秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放",
   // 设置样式
   style: TextStyle(
      // 字体的大小
      fontSize: 22,
      // 字体的颜色
      color: Colors.green,
      // 设置下划线
      decoration: TextDecoration.overline,
      // 设置下划线的颜色
      decorationColor: Colors.red
      // 字体倾斜
      fontStyle: FontStyle.italic,
      // 字体加粗
      fontWeight: FontWeight.bold
   ),
   // 设置对齐方式
   textAlign: TextAlign.center,
   // 设置方向
   textDirection: TextDirection.rtl,
   // 设置缩放系数
   textScaleFactor: 1.0,
   // 最大行数
   maxLines: 2,
   // 超出显示 ...
   overflow: TextOverflow.ellipsis,
);

1.3、Text.Rich富文本

Text.rich(
   TextSpan(
      children: [
         TextSpan(text: "Hello World", style: TextStyle(color: Colors.green)),
         TextSpan(text: "Hello Flutter", style: TextStyle(color: Colors.brown)),
         WidgetSpan(child: Icon(Icons.favorite, color: Colors.red,)),
         TextSpan(text: "Hello 北京", style: TextStyle(color: Colors.black)),
      ]
   )
);

二、图标及按钮组件

2.1、图标组件图标组件(Icon) 为展示图标的组件，该组件不可交互，要实现可交互的图标，可以考虑使用 IconButton 组件。图标组件相关的组件有以下几个：

IconButton：可交互的 Icon
Icons：框架自带 Icon集合
IconTheme：Icon 主题
IconImage：通过 AssetImages 或者其他图片显示 Icon

我们看下面的一个例子

Icon(
   Icons.phone,
   color: Colors.green,
   size: 80,
);

扩展：使用自定义的Icon

2.2、图标按钮组件
图标按钮组件(IconButton)是基于 Material Design 风格的组件，它可以响应按下事件，并且按下时会带一个水波纹的效果。如果它的 onPressed 回调函数为null, 那么这个按钮处于禁用的状态，并且不可以按下。

IconButton(
   icon: Icon(Icons.volume_up, size: 48.0,),
   tooltip: '按下操作',
   onPressed: () {
      print("按下操作");
   },
);

2.3、RaisedButton 凸起组件按钮(被废弃了)，新的使用 ElevatedButton详细使用地址凸起组件按钮(RaisedButton) 是Material Design 风格中的 button ,一个凸起的材质矩形按钮，它可以响应以下事件，并且按下时会带一个触摸的效果。

RaisedButton

RaisedButton(
  child: Text("RaisedButton"),
  textColor: Colors.red,
  color: Colors.brown,
  onPressed: () {
    print("RaisedButton Click");
  },
)

FlatButton 废弃了，被 TextButton 取代

FlatButton(
   child: Text("FlatButton"),
   color: Colors.red,
   onPressed: () {
      print("FlatButton Click");
   },
)

TextButton的使用如下

TextButton(
   style: ButtonStyle(
     backgroundColor: MaterialStateProperty.all(Colors.brown), 
   ),
   onPressed: () {
     print("喜欢");
   },
   child: Row(
     mainAxisSize: MainAxisSize.min,
     children: [
       Text("喜欢"),
       Icon(Icons.favorite, color: Colors.red,)
     ],
   )
)

扩展

TextButton(
    style: ButtonStyle(
      //圆角
     shape: MaterialStateProperty.all(
         RoundedRectangleBorder(
             borderRadius:
                BorderRadius.circular(
                    18.67))),
     //边框
      side: MaterialStateProperty.all(
       BorderSide(
                          color: Colors.red,
            width: 0.67),
         ),
        //背景
         backgroundColor:
            MaterialStateProperty.all(
               Colors.transparent)),
      child: Text(
        '确定',
        style: TextStyle(
           fontWeight: FontWeight.bold,
           color: Colors.white,
         fontSize: 14),
        ),
       onPressed: () {}
)

OutlineButton

OutlineButton(
   child: Text("OutlineButton"),
   color: Colors.red,
   onPressed: () {
      print("FlatButton Click");
   },
)

FloatingActionButton

FloatingActionButton(
   child: Icon(Icons.add),
   onPressed: () {
      print("FloatingActionButton Click");
   },
)

2.4、自定义 Button

FlatButton(
    color: Colors.amberAccent,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(6.0)
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(Icons.favorite, color: Colors.red,),
        Text("喜欢你")
      ],
    ),
    onPressed: () {
      print("自定义FlatButton Click");
    },
  )

三、图片组件

Image支持的图片格式：JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP，BMP和WBMP。

3.1、Image.assets：加载本地资源图片；

在Flutter项目中创建一个文件夹，存储图片，通过key从AssetBundle获得的图像
在pubspec.yaml进行配置

assets:
   - assets/images/juren.jpeg
   - assets/images/2.0x/
   - assets/images/3.0x/

配置完执行下：flutter packages get
使用图片

AssetImage("assets/images/juren.jpeg")

3.2、Image.network：加载网络中的图片；Image属性可以设置：

const Image({
   ...
   this.width, //图片的宽
   this.height, //图片高度
   this.color, //图片的混合色值
   this.colorBlendMode, //混合模式
   this.fit,//缩放模式
   this.alignment = Alignment.center, //对齐方式
   this.repeat = ImageRepeat.noRepeat, //重复方式
    ...
})

width、height：用于设置图片的宽、高，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小，如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，但可以通过下面介绍的fit属性来指定适应规则。
fit：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：

fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
color和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式；
repeat：当图片本身大小小于显示空间时，指定图片的重复规则。

示例代码如下

final imageUrl = 'http://image.xcar.com.cn/attachments/a/day_200323/2020032314_59939b0716c40f9be872JrmcP75B4KfO.jpg-app';
Image(
   image: NetworkImage(imageUrl),
   width: 200,
   height: 200,
   // 宽度固定，高度自适应
   fit: BoxFit.fitHeight,
   // 范围 -1 到 1
   alignment: Alignment(0, 0),
);

扩展其他加载图片的方式

Image.file 从本地文件中获取图片

举例：

加载完整路径的本地图片
import 'dart:io';
Image.file(File('/sdcard/Download.Stack.png')),
加载相对路径的本地图片，需要导入插件：path_provider
导入头文件使用
import 'dart:io'
import 'package:path_provider/path_provider.dart'
FutureBuilder(future: _getLocalFile("Download/stack.png")
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
     return snapshot.data != null ? Image.file(snapshot.data) : Container();
}),
// 获取 SDCard的路径
Future<File> _getLocalFile(String filename) async {
    String dir (await getExternalStorageDirectory()).path;
    File f = File('$dir/$filename');
    return f;
}

Image.memory 用于从Uint8List获取图像

3.3、如何设置 placeholder为了设置 Placeholder 我们需要借助 FadeInImage，它能够从内存，本地资源中加载 placeholder。插件：transparent_image

使用方式如下：

FadeInImage.memoryNetwork(
      placeholder: kTansparentImage,
      image: '图片链接' 
)

使用本地的资源图片作为placeholder

FadeInImage.assetNetwork(
     placeholder: 'assets/图片地址',
     image: '图片链接' 
)

3.4、配置图片缓存
在Flutter中我们可以借助：cached_network_image 插件，来从网络上加载图片，并将其缓存到本地，以供下次使用

CachedNetworkImage(
      placeholder: CircularProgressIndicator(),
      imageUrl: '图片链接'        
)

3.5、实现圆角图像

方式一：CircleAvatarCircleAvatar可以实现圆角头像，也可以添加一个子Widget：

const CircleAvatar({
   Key key,
   this.child, // 子Widget
   this.backgroundColor, // 背景颜色
   this.backgroundImage, // 背景图像
   this.foregroundColor, // 前景颜色
   this.radius, // 半径
   this.minRadius, // 最小半径
   this.maxRadius, // 最大半径
})

我们来实现一个圆形头像

注意一：这里我们使用的是NetworkImage，因为backgroundImage要求我们传入一个ImageProvider；
ImageProvider是一个抽象类，事实上所有我们前面创建的Image对象都有包含image属性，该属性就是一个ImageProvider
注意二：这里我还在里面添加了一个文字，但是我在文字外层包裹了一个Container；
这里Container的作用是为了可以控制文字在其中的位置调整；

class HomeContent extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return Center(
        child: CircleAvatar(
           radius: 100,
           backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
           child: Container(
              alignment: Alignment(0, .5),
              width: 200,
              height: 200,
              child: Text("兵长利威尔")
           ),
       ),
    );
  }
}

方式二：ClipOval
ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

Center(
   child: ClipOval(
      child: Image.network(
          imageUrl,
          width: 200,
          height: 200,
      ),
   )
);

Day06 - Flutter 常用的基础 Widget（上）

一、文本 Widget

二、图标及按钮组件

三、图片组件

热门文章

最新文章

相关课程

相关电子书