Flutter基于ListView实现水平和垂直方式滚动的列表

最新推荐文章于 2024-04-17 22:06:15 发布

原创

最新推荐文章于 2024-04-17 22:06:15 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

博客主要围绕ListView展开，介绍了如何基于ListView实现水平和垂直方式滚动的列表，重点探讨了垂直滚动列表和水平滚动列表的实现方法。

基于ListView实现水平和垂直方式滚动的列表

如何实现垂直滚动的列表？
如何实现水平滚动列表？

如何实现垂直滚动列表？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
const CITY_NAMES = [ '北京', '上海', '广州', '深圳', '杭州', '苏州', '成都', '武汉', '郑州', '洛阳', '厦门', '青岛', '拉萨' ];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Basic List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: _buildList(),
        ),
      ),
    );
  }

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

  Widget _item(String city) {
    return Container(
      height: 80,
      margin: EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.tea