Flutter常用组件

Slider 滑块组件

他是一个滑块的组件，可以滑动，懂我意思吧！

这是原始的样子：

Slider(value: 0, onChanged: (value) {}),

class _SliderDemoState extends State<SliderDemo> {
// 设置回调值为零，每次拖动就会改变这个值
  double _value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Slider"),
        ),
        body: Container(
          child: Column(
            children: [
              // 不能滑动
              Slider(value: 0, onChanged: (value) {}),
              Slider(
                // 当拖动的时候，确定当前的圆点的位置
                value: _value,
                
                // 标签，需要和divisions连用
                label: "${_value}",
                
                // 设置刻度，将这个其分为四份
                divisions: 4,
                
                // 设置最小值
                min: 0,
                
                // 设置最大值
                max: 100,
                
                // 设置已滑动过的颜色
                activeColor: Colors.teal,
                
                // 设置还没有滑到的颜色
                inactiveColor: Colors.redAccent,
                
                // 设置圆点的颜色
                thumbColor: Colors.blueGrey,
                
                // 回调方法，用于返回当前圆点的位置
                onChanged: (value) {
                  setState(() {
                    _value = value;
                  });
                },
              ),
            ],
          ),
        ));
  }
}

const Slider({
    Key? key,
    required this.value,
    required this.onChanged,
    this.onChangeStart,
    this.onChangeEnd,
    this.min = 0.0,
    this.max = 1.0,
    this.divisions,
    this.label,
    this.activeColor,
    this.inactiveColor,
    this.thumbColor,
    this.mouseCursor,
    this.semanticFormatterCallback,
    this.focusNode,
    this.autofocus = false,
  }) : _sliderType = _SliderType.material,
       assert(value != null),
       assert(min != null),
       assert(max != null),
       assert(min <= max),
       assert(value >= min && value <= max),
       assert(divisions == null || divisions > 0),
       super(key: key);

Switch 开关组件

可以实现开和关的组件。
原始样子：

Switch(value: false, onChanged: (v){}),

Text("当前开关为：${_value == false ? "关闭状态" : "开启状态"}"),
Switch(
    // 设置当前开关是否 开启/关闭 状态
    value: _value,
    // 回调当前是否点击了开关
    onChanged: (v) {
      setState(() {
        _value = v;
      });
    }),

const Switch.adaptive({
    Key? key,
    required this.value,
    required this.onChanged,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.onActiveThumbImageError,
    this.inactiveThumbImage,
    this.onInactiveThumbImageError,
    this.materialTapTargetSize,
    this.thumbColor,
    this.trackColor,
    this.dragStartBehavior = DragStartBehavior.start,
    this.mouseCursor,
    this.focusColor,
    this.hoverColor,
    this.overlayColor,
    this.splashRadius,
    this.focusNode,
    this.autofocus = false,
  })  : assert(autofocus != null),
        assert(activeThumbImage != null || onActiveThumbImageError == null),
        assert(inactiveThumbImage != null || onInactiveThumbImageError == null),
        _switchType = _SwitchType.adaptive,
        super(key: key);

再来个苹果风格的开关

CupertinoSwitch(
    value: _value,
    onChanged: (v) {
      setState(() {
        _value = v;
      });
    })

样式如下：

SwitchListTile 开关条

可以设置标题等信息的开关条，
这个可以设置多个。

SwitchListTile(
     value: _value,
     title: Text("这是标题"),
     subtitle: Text("这是副标题"),
     onChanged: (v) {
       setState(() {
         _value = v;
       });
     }),

样式如下：
设置样式的标题

SwitchListTile(
    // 主标题
    title: Text("这是标题"),
    // 子标题
    subtitle: Text("这是副标题"),
    // 开关的状态
    value: _value,
    // 标题颜色
    tileColor: Color(0xffededed),
    // 回调方法
    onChanged: (v) {
      setState(() {
        _value = v;
      });
    })

样式如下：

源码如下：

  const SwitchListTile({
    Key? key,
    required this.value,
    required this.onChanged,
    this.tileColor,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.inactiveThumbImage,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.contentPadding,
    this.secondary,
    this.selected = false,
    this.autofocus = false,
    this.controlAffinity = ListTileControlAffinity.platform,
    this.shape,
    this.selectedTileColor,
  }) : _switchListTileType = _SwitchListTileType.material,
       assert(value != null),
       assert(isThreeLine != null),
       assert(!isThreeLine || subtitle != null),
       assert(selected != null),
       assert(autofocus != null),
       super(key: key);

进度条

可以用于显示网络的加载状况和文件下载等进度，主要用于显示进度。

线性进度条
默认样式如下：

LinearProgressIndicator(),

样式如下：

可以设置他的样式，但是一旦设置了他的value之后就不能动了，可以借助计时器（Timer）改变value的值，从而达到动起来的效果。

LinearProgressIndicator(
    value: 0.8,
    color: Colors.blueGrey,
    backgroundColor: Colors.redAccent,
  )

样式如下：

源码如下：

  const LinearProgressIndicator({
    Key? key,
    double? value,
    Color? backgroundColor,
    Color? color,
    Animation<Color?>? valueColor,
    this.minHeight,
    String? semanticsLabel,
    String? semanticsValue,
  }) : assert(minHeight == null || minHeight > 0),
       super(
         key: key,
         value: value,
         backgroundColor: backgroundColor,
         color: color,
         valueColor: valueColor,
         semanticsLabel: semanticsLabel,
         semanticsValue: semanticsValue,
       );

圆形进度指示器
和上面的线性进度指示器的用法一样。
默认样式如下：

// 默认圆形进度指示器
CircularProgressIndicator(),

// 自适应圆形进度指示器
CircularProgressIndicator.adaptive(value: 0.5,)

样式如下：
刷新进度指示器
和上面的线性进度指示器的用法一样。
默认样式如下：

RefreshProgressIndicator(),

CupertinoActivityIndicator()

Image 图片组件

可以放置图片的组件
在这之前，如果使用的是静态图片，则需要在pubspec.yaml文件中进行配置，并且需要这个项目的根目录下创建一个放置图片的文件夹。

像这个样子：
在pubspec.yaml文件中进行配置：

// 这是直接添加整个文件夹下面的图片
assets:
 - images/

// 添加单张图片
assets:
 - images/1.png
 - images/2.png

注意：在添加之后，需要点击Android studio右上角的Pub get进行添加依赖：图片组件

使用本地图片资源，即使用asset方法：

Image.asset("images/1.png")

可以设置他的样式：

Wrap(
        children: [
          Container(
            alignment: Alignment.center,
            width: 100,
            height: 100,
            child: Image.asset("images/1.png"),
          ),
          Container(
            alignment: Alignment.center,
            width: 100,
            height: 100,
            child: Image.asset(
              "images/1.png",
              fit: BoxFit.cover,
            ),
          ),
          Container(
            alignment: Alignment.center,
            width: 100,
            height: 100,
            child: Image.asset(
              "images/1.png",
              // 设置填充方式
              fit: BoxFit.fitWidth,
              // 设置宽、高
              width: 50,
              height: 50,
              // 填充方式
              repeat: ImageRepeat.repeat,
            ),
          ),
        ],
      )

使用网络图片
使用网络图片的前提是要有网络，不然一切都是扯淡，
用法和上面的静态图片的用法相同。

Container(
  alignment: Alignment.center,
  width: 100,
  height: 100,
  child: Image.network(
    "https://pic.netbian.com/uploads/allimg/220131/012219-16435633391d32.jpg",
    // 设置填充方式
    fit: BoxFit.fitWidth,
    // 设置宽、高

    // 填充方式
    repeat: ImageRepeat.repeat,
  ),
),
Container(
	alignment: Alignment.center,
	width: 100,
	height: 100,
	child: Image.network(
	  "https://pic.netbian.com/uploads/allimg/220205/002942-1643992182534d.jpg",
	  // 设置填充方式
	  fit: BoxFit.fitWidth,
	  // 设置宽、高
	
	  // 填充方式
	  repeat: ImageRepeat.repeat,
	),
)

样式如下：

还有其他加载图片的方式，我就只举这两种加载方式！
源码如下：

  const Image({
    Key? 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,
  }) : assert(image != null),
       assert(alignment != null),
       assert(repeat != null),
       assert(filterQuality != null),
       assert(matchTextDirection != null),
       assert(isAntiAlias != null),
       super(key: key);

有时间在更新…再见，各位打工人。
还是推荐你们去看看老孟的Flutter:

300多个组件的解读，完全够用了！我不是在打广告哈！！！！！