第二章：Hello,Flutter（七）

ZWaruler

已于 2022-03-10 15:48:28 修改

阅读量732

点赞数

分类专栏： Flutter-从入门到放弃文章标签： flutter android android studio

于 2022-03-02 16:40:41 首次发布

本文链接：https://blog.csdn.net/u010483016/article/details/123231981

版权

Flutter-从入门到放弃专栏收录该内容

24 篇文章 3 订阅

订阅专栏

Flutter-从入门到放弃(目录,持续更新中)

就餐人数互动

接下来我们在菜谱详情页中添加一个Slider Widget,用户可以通过它来调整就餐人数.
首先在_RecipeDetailState 中增加一个变量,来存储Slider确定的值.

int _sliderVal = 1;

然后在**TODO: Add Slider()**的地方新增如下代码:

Slider(
              //8.取值区间及被划分的数量
              min: 1,
              max: 10,
              divisions: 10,
              //滑动时出现在Slider上方的提示
              label: '${_sliderVal * widget.recipe.servings} servings',
              value: _sliderVal.toDouble(),
              //9.被滑动时的回调方法,将会获得当前滑动的最新值
              onChanged: (newValue) {
                setState(() {
                  _sliderVal = newValue.round();
                });
              },
              //10.Slider 划过和未到达的部分的颜色设置
              activeColor: Colors.green,
              inactiveColor: Colors.black,
            )

运行后效果如图:
在这里插入图片描述

更新原料数量

用户在滑动选择就餐人数之后,我们还需要把选择的值更新到原料中去.在Expanded下的TODO: Add ingredient.quantity这里,我们把**_sliderVal**的值更新进去.

 return Text('${ingredient.quantity * _sliderVal} ${ingredient.measure} ${ingredient.name}');

我们可以看到,随着用户的滑动,我们的原料列表数据也会同步更新了.
在这里插入图片描述
现在我们已经完成这个APP了,可以顺利的在Android和IOS上运行起来了,我们也已经初步的了解了Flutter开发中的一些基础知识,下面,我们将会继续深入了解Flutter中的Widget, Everything’s a
Widget.