Flutter 可滚动页面实现

最新推荐文章于 2024-05-10 09:48:10 发布

jia635

最新推荐文章于 2024-05-10 09:48:10 发布

阅读量5.7k

点赞数 1

分类专栏： Flutter 从 0 到 1 文章标签： listview 列表

本文链接：https://blog.csdn.net/jia635/article/details/109841375

版权

Flutter 从 0 到 1 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

1、CustomScrollView

继承实现了 ScrollView，可以通过 scrollDirection 控制水平（Axis.horizontal）还是竖直方向（Axis.vertical）滚动。

主要实现slivers，SliverList要 实例化delegate。例子如下

CustomScrollView(
      scrollDirection: Axis.horizontal,
      slivers: <Widget>[
        SliverList(
          delegate: new SliverChildListDelegate(
            [
              Container(
                width: 1000,
                child: Text(
                  "CustomScrollView   scrollDirection: Axis.horizontal",
                  style: styleBlack54Size16WBold,
                ),
                alignment: Alignment.center,
              )
            ],
          ),
        ),
      ],
    )

2、ListView

ListView 主要实现Item列表，可以通过 itemCount 数量1只加载一个View从而实现滑动。实现如下

ListView.builder(
      scrollDirection: Axis.vertical,
      itemCount: 1,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 1500,
          color: Colors.blueAccent,
          alignment: Alignment.center,
          child:Text("ListView.builder",
            style: styleBlack54Size16WBold,),
        );
      },
    );

也可以

ListView(
          
          children: <Widget>[
            Container(
              height: 1500,
              alignment: Alignment.center,
              child: Text("Test"),
            )
          ],
        ),
      ),

注：如果ListView 或者CustomScrollView 为 Column 子View,则需要把ListView包裹在Expand 下。

  Expanded(
          child: ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: 1,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 1500,
                color: Colors.blueAccent,
                alignment: Alignment.center,
                child: Text(
                  "ListView.builder",
                  style: styleBlack54Size16WBold,
                ),
              );
            },
          ),
        ),