Flutter之ListView实现水平和垂直滚动

最新推荐文章于 2024-08-10 07:02:17 发布

wanxiaofan

最新推荐文章于 2024-08-10 07:02:17 发布

阅读量2.1k

点赞数

分类专栏： Flutter 文章标签： flutter css html5

本文链接：https://blog.csdn.net/wanxiaofan/article/details/120024244

版权

Flutter 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Flutter中创建ListView组件，展示了一个水平滑动的列表效果。通过设置scrollDirection属性为Axis.horizontal，可以将默认的垂直列表转变为水平滑动。同时，为了控制水平滑动时每个item的高度，需要指定ListView的高度。示例代码中展示了如何填充数据并构建列表项。

摘要由CSDN通过智能技术生成

一、效果就和正常的列表控件滑动一样

二、实现

1、创建ListView组件，因为里边需要传入一个List的Widget这个就是我们的组件

2、ListView默认是垂直滑动的，如果你的需要的就是垂直滑动不用做任何处理直接填充数据即可

3、准备数据源，填充ListView实现就能实现滑动

4、如果你需要把垂直数据源变为水平的那么修改ListView的scrollDirection: Axis.horizontal

5、在水平滑动的时候，如果你需要控制item的高度，那么需要设置ListView的高度，才能修改有效果

三、以下是源代码

class StarPage extends StatefulWidget {
  const StarPage({Key key}) : super(key: key);

  @override
  _StarPageState createState() => _StarPageState();
}

const citys = [
  "北京",
  "北京",
  "上海",
  "北京",
  "广东",
  "深圳",
  "北京",
  "杭州",
  "北京",
  "苏州",
  "北京",
  "苏州",
  "武汉",
  "苏州",
  "郑州",
  "天津"
];

class _StarPageState extends State<StarPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "星球",
      home: Scaffold(
        appBar: AppBar(
          title: Text("星球"),
        ),
        //包裹listview ，设置高度
        body: ListView(
          children: _budildList(),
          scrollDirection: Axis.horizontal,
        ),
      ),
    );
  }

  List<Widget> _budildList() {
    return citys.map((city) => _item(city)).toList();
  }

  Widget _item(String city) {
    return Container(
      height: 80,
      width: 160,
      margin: EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(
        city,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    );
  }
}