在实际项目中有些页面使用纯色做背景,有些页面使用图片做背景,使用纯色做背景时只需要修改容器的color或者background属性就可以,这里的容器可以是充当整个
页面的Scaffold或者局部页面的Container.使用图片做背景时就不能修改容器的属性了,因为容器没有提供存放图片的属性。那么怎么办呢?自定义一个容器?还是
使用其它的方法?本章回中将解决此问题。
我们准备使用Stack这种布局,把图片放在它的最底层,然后把其它的页面组件叠加在图片上,这样就相当于把图片当作了其它页面组件的背景,进而实现了以图片为背景
的页面。这种思路是一种图层的思想,把不同的内容当作不同的图层,然后充分利用Stack叠加组件的原理,把多个图层叠加在一起。
介绍完整体的思路后,我们介绍具体的操作步骤,其中会包含很多的细节,大家要看仔细了哦!
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'),
]
),
),
我们在上面的示例代码中演示了wheelChooser的基本用法,同时演示了其它工厂方法的使用方法,编译并且运行上面的程序,可以得到以下的运行效果图:
最后,我们对本章回的内容做一个全面的总结:(博客中有两个同名的文章,第一个是错误的,第二个是正确的)