Flutter开发之——可滚动组件—SingleChildScrollView

最新推荐文章于 2024-04-16 10:08:45 发布

原创最新推荐文章于 2024-04-16 10:08:45 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flutter #ScrollView

Flutter 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了Flutter中的SingleChildScrollView组件，它用于创建可滚动的单子元素布局。SingleChildScrollView通常与Column或Row结合使用。文章详细讲解了构造函数参数，如scrollDirection、reverse和physics，并提供了一个示例代码，展示如何创建一个垂直滚动的列表，其中包含50个不同颜色的Container。示例代码中设置了内边距和文本内容，展示了SingleChildScrollView的基本用法。

一概述

SingleChildScrollView：是一个只能包含单个组件的滚动组件
SingleChildScrollView常跟Column/Row组合使用

二 SingleChildScrollView

2.1 构造函数

const SingleChildScrollView({
    Key? key,
    this.scrollDirection = Axis.vertical,
    this.reverse = false,
    this.padding,
    bool? primary,
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.start,
    this.clipBehavior = Clip.hardEdge,
    this.restorationId,
  })

2.2 常用属性说明

属性	说明	取值
scrollDirection	滚动方向	Axis枚举
reverse	是否反转滚动方向	bool
physics	滚动物理特性	ScrollPhysics

三示例

3.1 代码

SingleChildScrollView(
            scrollDirection: Axis.vertical,
            padding: EdgeInsets.all(10),
            child: Column(
            children: List.generate(50, (index) {
              return Container(
                alignment: Alignment.center,
                height: 80,
                child: Text("$index"),
                color: Colors.primaries[index % Colors.primaries.length],
              );
            }).toList(),
          ),
        )