Flutter中Radio、RadioListTile、Image、Slider

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1. Radio组件（单选按钮组件）

例如，在页面上实现一个性别选择的功能，并将选择结果显示在页面的右侧。

实现效果：

2.RadioListTile组件

RadioListTile组除了包含Radio组件的常用属性外，还包含如表所示的其它常用属性。

示例：

部分代码：

下图中的Offstage布局可以控制组件是否隐藏！

3. Image组件

lmage组件（图片组件）是一个用于展示图片的组件，它支持JPEG.PNG、GIF、Animated GIF(动画GIF) . WebP、 Animated WebP(动画WebP) 、BMP和WBMP等格式的图片.lmage组件的常用属性及功能说明如表所示。

□wiath 和 height：通过上面方式展示的图片，大小还是原始图片的大小，如果想展方
定宽或者定高的图片，可以指定Image组件的width或height属性。
注意：
当同时设置width 和height 属性的值后，Image 默认会选取两者中的最小值，然后等比缩放，以满足最小值的约束。
□fit：如果需求本身就是让 Image 组件按指定的宽或高来显示图片，那么可以设置fit属性。示例如下:
Image.asset(‘path’, width: value, height: value,fit: value)
下面简要介绍一下fit属性的取值。
■ contain:这是 fit 属性的默认值，表示在满足图片的宽高比的前提下，让图片的显示范围不超过width和height 属性设置的值。
■ fill：如果想让图片内容充满整个Image组件，可以使用 fill，即 fit:BoxFit.fil这存在一个问题，当指定的宽高比与图片资源的宽高比不同时，会造成图片拉伸。cover：如果觉得拉伸后的图片太不美观，那么可以不要拉伸，在保持图片宽高比的情况下适当做裁切，此时需要用到 cover 属性（即 fit：BoxFit.cover )。正如前面述，该属性会等比例地填充图片,使其宽高达到指定的宽高值，同时裁切超出指定区域的内容。
■fitHeight 和 fitwiath;这两个属性比较相似。前者指将图片的高度等比例缩放至指定高度，此时如果图片宽度大于指定的宽度值，就会把图片裁窄。后者的作用与其类似。
□repeat:上面介绍的fit 是通过缩放图片来填充多余区域的，其实还可以通过指定图片的“重复”来填充多余区域。如果高度多余，可以使用repeatY;如果宽度多余，以使用repeatx。具体的设置代码如下：
Image.asset (‘path’, width; value, height; value,repeat: repeatY)

Image的5种使用方法如下：

1. lmage.asset
   lmage.asset方法用于加载项目中的图片资源文件。
   lmage.asset("images/p1.jpg", width: 500,height: 500,);

Image.asset(
    String name, {
    super.key,
    AssetBundle? bundle,
    this.frameBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double? scale,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    String? package,
    this.filterQuality = FilterQuality.low,
    int? cacheWidth,
    int? cacheHeight,
  })

2. lmage.network
   lmage.network方法用于加载网络图片。
   lmage.network('https://www.baidu.com/img/bd_logo1.png?qua=high&where=super')

Image.network(
    String src, {
    super.key,
    double scale = 1.0,
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    this.isAntiAlias = false,
    Map<String, String>? headers,
    int? cacheWidth,
    int? cacheHeight,
  })

3. lmage.file
   lmage.file方法用于加载本地图片文件（来源于照相机或相册）。
   

Image.file(
    File file, {
    super.key,
    double scale = 1.0,
    this.frameBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,
    int? cacheWidth,
    int? cacheHeight,
  })

4. lmage.memory
   lmage.memory方法用于加载Uint8List资源图片，即可以将一个byte数组数据作为图片显示在页面上。
5. lmage
   lmage方法的image参数是lmageProvider类型的对象, ImageProvider是抽象类，在Flutter SDK中提供了Assetlmage、Networklmage.Filelmage、Memorylmage等lmageProvider的子类来满足开发者需要。
   

const Image({
    super.key,
    required this.image,
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,
  })

4. CircleAvatar组件

CircleAvatar组件(圆形组件)用于创建一个圆形容器组件。

5. 裁剪组件

1. ClipOval

ClipOval clipOval = ClipOval(child: lmage.asset('images/p4.jpg'));

2.ClipRRect

ClipRRect clipRRect = ClipRRect(
	borderRadius: BorderRadius.circular(40.0),//设置四个圆角边弧度
	child: Image.asset("images/p4.jpg')
)

3.ClipRect

//(1)创建一个继承自CustomClipper的子类MyClipclass 
MyClip exctends CustomClipper<Rect>{
	@override
	Rect getClip(Size size) => Plect.fromLTWH(60.0,15.0.60.0,300.0);
	@override
	bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}
//(2)使用ClipRect按MyClip设置的区城进行裁剪
ClipRect clipRect = ClipRecticlipper: MlyClip().
	child: Image.asset( images/p4.jpg),
}

6. Slider组件(滑块)

Slider组件（滑块组件)用于在一个范围内（即最大值和最小值之间)选择连续性的或者非连续性的数据。Slider组件的常用属性和功能说明如表所示。


实现效果：