Flutter iOS风格列表视图插件 cupertino_listview 的使用

cupertino_listview 是一个用于在Flutter中显示垂直列表（分组项的集合）并遵循iOS UX设计的库。它等同于iOS中的UITableView，但仅支持简单的分组。

主要组件

该库包含一个名为 CupertinoListView 的小部件，其用法类似于 [ListView] 小部件。您有两种构建方式：

• 动态构建：使用 CupertinoListView.builder
• 静态子组件：使用 CupertinoListView 构造函数

示例代码

动态构建示例

CupertinoListView.builder(
  sectionCount: _data.length,
  itemInSectionCount: (section) => _data[section].items.length,
  sectionBuilder: (context, sectionPath, _) => Text(_data[sectionPath.section].name),
  childBuilder: (context, indexPath) => Text(_data[indexPath.section].items[indexPath.child]),
  separatorBuilder: (context, indexPath) => Divider(indent: 20.0),
  controller: _scrollController,
);

静态子组件示例

CupertinoListView(
  children: _data.fold([], (list, section) {
    return [
      Text(_data[section].name),
      ..._data[section].items.map((item) => Text(item)).toList(),
    ];
  }),
  padding: const EdgeInsets.all(4.0),
);

完整示例Demo

import 'package:cupertino_listview/cupertino_listview.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CupertinoListView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter CupertinoListView Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _data = Section.allData(); // 假设有一个Section类和allData方法来获取数据
  late final ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: CupertinoListView.builder(
        sectionCount: _data.length,
        itemInSectionCount: (section) => _data[section].itemCount,
        sectionBuilder: _buildSection,
        childBuilder: _buildItem,
        separatorBuilder: _buildSeparator,
        controller: _scrollController,
      ),
    );
  }

  Widget _buildSeparator(BuildContext context, IndexPath index) {
    return Divider(indent: 20.0, endIndent: 20.0);
  }

  Widget _buildSection(BuildContext context, SectionPath index, bool isFloating) {
    final style = Theme.of(context).textTheme.headlineMedium;
    return Container(
      height: 80.0,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 20.0),
      color: Theme.of(context).primaryColorDark,
      child: Text(_data[index.section].name,
          style: style!.copyWith(color: Colors.white)),
    );
  }

  Widget _buildItem(BuildContext context, IndexPath index) {
    final attribute = _data[index.section][index.child];
    return Container(
      padding: const EdgeInsets.all(20.0),
      constraints: BoxConstraints(minHeight: 50.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(child: Text(attribute.console), width: 120.0),
          Expanded(child: Text(attribute.attribute)),
        ],
      ),
    );
  }
}

属性说明

以下是 CupertinoListView 的主要属性及其描述：

通过这些属性和方法，您可以创建出符合iOS风格的列表视图，并根据需要进行定制。希望这个介绍能帮助您更好地理解和使用 cupertino_listview 插件！