在设计页面布局时,常常会碰到内容太多,一屏装不下的尴尬状况。这时候,自适应延伸功能就大显身手了,借助滚动条,用户就能轻松拖动查看全部内容。下面介绍两种在不同场景下实现这一功能的方法:
在 List 中添加滚动条
当 List 的子项多得挤满了屏幕,我们可以把每个子元素分别放在对应的组件里,再利用滚动条来灵活展示。这里有两个关键属性值得一提:scrollBar 能决定滚动条是一直待在那儿,还是按需出现;edgeEffect 则负责设定拖动到内容尽头时那种有趣的回弹效果,给用户交互增添一点小惊喜。只不过,这段内容没给出完整代码示例,大家在实际操作时,要记得把相关属性精准设置到 List 组件上。
使用 Scroll 组件
这个方法特别实用,在线性布局里,不管是垂直方向,还是水平方向布局,只要内容超屏了,在 Column 或者 Row 外层裹上 Scroll 组件,立马就能让布局拥有滑动查看的超能力。
垂直方向布局中使用 Scroll 组件
在这段代码里,Scroll 组件包裹着 Column,ForEach 循环生成了一系列 Text 组件。设置 scrollable 为 ScrollDirection.Vertical,明确是垂直滚动;scrollBar 设为 BarState.On 让滚动条一直显示;还给滚动条定好了颜色、宽度,以及回弹效果,方便用户顺畅浏览垂直排列的内容。
水平方向布局中使用 Scroll 组件
这里和垂直方向类似,只不过 Scroll 组件包裹的是 Row,scrollable 设成了 ScrollDirection.Horizontal,让用户可以水平滑动查看并排排列的内容,同样搭配舒适的滚动条显示与交互效果。