Flutter模态列表展示插件kmodal

Flutter模态列表展示插件kmodal_listview的使用

kmodal_listview 是一个可以实现下拉刷新和加载更多功能的 ListView。它让你在处理数据时可以自由地进行其他工作。

开始使用

感谢以下包为构建此插件做出贡献：

get (https://pub.dev/packages/get)
pull_to_refresh (https://pub.dev/packages/pull_to_refresh)

完整示例

以下是完整的示例代码，展示了如何使用 kmodal_listview 插件。

import 'package:flutter/material.dart';
import 'package:kmodal_listview/kmodal_listview.dart';

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

///===================================
class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'KModalListView'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SafeArea(
        child: KListView<String>(
          model: MyModal(),
          options: KOptions(
            loadingIcon: Container(
              width: 25,
              height: 25,
              child: CircularProgressIndicator(color: Colors.purple),
            ),
          ),
        ),
      ),
    );
  }
}

///===================================
class MyModal extends KModal<String> {
  @override
  Widget empty({VoidCallback? retryFunction}) => Center(
        child: Text('Empty Content'),
      );

  @override
  String? get getKey => 'private_key';

  @override
  Widget listItem({String? data}) => Container(
        color: Colors.green.shade200,
        padding: const EdgeInsets.all(20),
        margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: Text(
          data ?? '...',
          style: TextStyle(fontSize: 15, color: Colors.black87),
        ),
      );

  @override
  Widget loading() =>
      Center(child: CircularProgressIndicator(color: Colors.red));

  @override
  Future<List<String>?> request({int page = 1}) async {
    if (page == 1) {
      return Future.delayed(
        const Duration(seconds: 3),
        () => List<String>.generate(10, (index) => "ListItem $index"),
      );
    } else if (page == 2) {
      return Future.delayed(
        const Duration(seconds: 3),
        () => List<String>.generate(4, (index) => "Next ListItem $index"),
      );
    } else {
      return [];
    }
  }
}

代码解释

导入必要的包

import 'package:flutter/material.dart';
import 'package:kmodal_listview/kmodal_listview.dart';

创建应用根小部件

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

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

创建主页面

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SafeArea(
        child: KListView<String>(
          model: MyModal(),
          options: KOptions(
            loadingIcon: Container(
              width: 25,
              height: 25,
              child: CircularProgressIndicator(color: Colors.purple),
            ),
          ),
        ),
      ),
    );
  }
}

定义模态类

class MyModal extends KModal<String> {
  @override
  Widget empty({VoidCallback? retryFunction}) => Center(
        child: Text('Empty Content'),
      );

  @override
  String? get getKey => 'private_key';

  @override
  Widget listItem({String? data}) => Container(
        color: Colors.green.shade200,
        padding: const EdgeInsets.all(20),
        margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: Text(
          data ?? '...',
          style: TextStyle(fontSize: 15, color: Colors.black87),
        ),
      );

  @override
  Widget loading() =>
      Center(child: CircularProgressIndicator(color: Colors.red));

  @override
  Future<List<String>?> request({int page = 1}) async {
    if (page == 1) {
      return Future.delayed(
        const Duration(seconds: 3),
        () => List<String>.generate(10, (index) => "ListItem $index"),
      );
    } else if (page == 2) {
      return Future.delayed(
        const Duration(seconds: 3),
        () => List<String>.generate(4, (index) => "Next ListItem $index"),
      );
    } else {
      return [];
    }
  }
}

更多关于Flutter模态列表展示插件kmodal_listview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼

更多关于Flutter模态列表展示插件kmodal_listview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

kmodal_listview 是一个用于在 Flutter 应用中展示模态列表的插件。它允许你在应用中弹出一个模态对话框，其中包含一个可滚动的列表项。这个插件通常用于需要用户从多个选项中选择一个的场景。

安装

首先，你需要在 pubspec.yaml 文件中添加 kmodal_listview 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  kmodal_listview: ^1.0.0  # 请确保使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示了如何使用 kmodal_listview 插件来展示一个模态列表：

import 'package:flutter/material.dart';
import 'package:kmodal_listview/kmodal_listview.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('kmodal_listview Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            KModalListView.showModalList(
              context: context,
              title: 'Choose an option',
              items: [
                'Option 1',
                'Option 2',
                'Option 3',
                'Option 4',
              ],
              onItemSelected: (index, item) {
                print('Selected item: $item at index $index');
              },
            );
          },
          child: Text('Show Modal List'),
        ),
      ),
    );
  }
}

参数说明

context: BuildContext，用于显示模态对话框。
title: 模态对话框的标题。
items: 列表项，通常是一个字符串列表，但也可以是任何类型的列表。
onItemSelected: 当用户选择一个列表项时触发的回调函数，返回选中的索引和项。

自定义样式

你可以通过传递额外的参数来自定义模态对话框的外观，例如背景颜色、文本样式等。

KModalListView.showModalList(
  context: context,
  title: 'Choose an option',
  items: [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
  ],
  onItemSelected: (index, item) {
    print('Selected item: $item at index $index');
  },
  backgroundColor: Colors.blueGrey,
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
);