第二百一十回

文章目录

  • 1. 概念介绍
  • 2. 实现方法
    • 2.1 整体思路
    • 2.2 具体步骤
  • 3. 代码与效果
    • 3.1 示例代码
    • 3.2 运行效果
  • 4. 内容总结

我们在上一章回中介绍了"如何实现Numberpicker"相关的内容,本章回中将介绍wheelChoose组件.闲话休提,让我们一起Talk Flutter吧。
我们在上一章回中介绍了WheelChoose组件相关的内容,本章回中将介绍如何创建以图片为背景的页面,闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

在实际项目中有些页面使用纯色做背景,有些页面使用图片做背景,使用纯色做背景时只需要修改容器的color或者background属性就可以,这里的容器可以是充当整个
页面的Scaffold或者局部页面的Container.使用图片做背景时就不能修改容器的属性了,因为容器没有提供存放图片的属性。那么怎么办呢?自定义一个容器?还是
使用其它的方法?本章回中将解决此问题。

2. 实现方法

2.1 整体思路

我们准备使用Stack这种布局,把图片放在它的最底层,然后把其它的页面组件叠加在图片上,这样就相当于把图片当作了其它页面组件的背景,进而实现了以图片为背景
的页面。这种思路是一种图层的思想,把不同的内容当作不同的图层,然后充分利用Stack叠加组件的原理,把多个图层叠加在一起。

2.2 具体步骤

介绍完整体的思路后,我们介绍具体的操作步骤,其中会包含很多的细节,大家要看仔细了哦!

  • 使用Scaffold组件当作页面,它的body属性对应Stack组件;
  • 在Stack组件中包含一个Image组件和一个SizedBox组件;
  • 调整Image和SizedBox组件的宽度和高度,确保它们与屏幕的宽度和高度保持一致;
  • 把Scaffold组件的extendBodyBehindAppBar设置为true,让body中的内容扩展到AppBar和StatusBar中;
  • 把AppBar的forceMaterialTransparency属性修改true,让AppBar的背景变成透明色,这样才能看到body中扩展的内容;
  • 把StatusBar设置成透明色,修改方法参考之前博客;这样才能看到body中扩展的内容;
    上面的步骤中,其实只需要前三步就可以创建一个带图片背景的页面,最后三步的内容是为了让图片填充满整个屏幕,包含页面上方的AppBar以及手机屏幕最上方的
    StatusBar.填充的原理就是先扩展body中的内容,然后把AppBar和StutasBar设置成透明色,这样就可以看到扩展的内容了。大家可以依据项目需求自行取舍。此外,
    还有一些注意事项需要说明:
  • 给Stack组件添加children组件时,Image组件在所有组件的前面,这样才能保证它在Stack组件的最底层;
  • 给Image组件的fit属性设置值,这样可以保证背景图片填充满整个页面;
  • 给SizeBox组件设置一个顶部边距,不然它里面的内容会和StatusBar中的内容重叠;

3. 代码与效果

3.1 示例代码

WheelChooser(
  ///控制滑动方向
  horizontal: true,
  ///使用装饰可以在选择的内容上方和下方显示一条横线
  selectTextStyle:TextStyle(
    ///单独使用和复合使用装饰
    // decoration: TextDecoration.overline,
    decoration: TextDecoration.combine([TextDecoration.underline,TextDecoration.overline]),
  ) ,
  ///是否循环显示
  isInfinite: true,
  onValueChanged: (s) => debugPrint('$s selected'),
  datas: [0,1,2,3,34,5,6,7,8,9],
),

///使用工厂方法,可以创建任意的选择器
SizedBox(
  height: 150,
  ///可以添加任意的组件,这里添加的是icon
  child: WheelChooser.custom(
    onValueChanged: (value) {},
    isInfinite: true,
    children: const [
      Icon(Icons.looks_3,size: 36,),
      Icon(Icons.looks_two,size: 36,),
      Icon(Icons.looks_one,size: 36,),
    ]),
),
///使用两种工厂方法实现数字选择器
SizedBox(
  ///通过控制容器的大小,可以控制显示被选择内容的范围
  height: 100,
  child: WheelChooser.integer(
    ///显示内容的大小,默认48
    itemSize: 50,
    horizontal: true,
    isInfinite: true,
    onValueChanged: (value) => debugPrint('$value'),
    maxValue: 3,
    minValue: 0,
  ),
),
SizedBox(
  height: 100,
  child: WheelChooser.number(
    isInfinite: true,
    onValueChanged: (value) => debugPrint('$value'),
    maxValue: 3,
    minValue: 0,
  ),
),
///可以选择任意对象当作被选择对象,因为value是泛型
SizedBox(
  height: 200,
  child: WheelChooser.choices(
   isInfinite: true,
    onChoiceChanged: (value) {},
    choices:[
      WheelChoice(value: 1, title: 'one'),
      WheelChoice(value: 2, title: 'tow'),
      WheelChoice(value: 3, title: 'three'),
    ]
  ),
),

3.2 运行效果

我们在上面的示例代码中演示了wheelChooser的基本用法,同时演示了其它工厂方法的使用方法,编译并且运行上面的程序,可以得到以下的运行效果图:

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:(博客中有两个同名的文章,第一个是错误的,第二个是正确的)

  • wheelChooser是三主包中提供的组件,它可以实现数字选择功能;
  • wheelChooser扩展了选择范围,不只是数字,其它的组件也可以被选择;
  • whellChooser提供了很多工厂方法,通过工厂方法可以快速创建相关的选择器;
    看官们,与"wheelChooser组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,移动开发flutter)