Flutter布局辅助插件wrap_and_more的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter布局辅助插件 wrap_and_more 的使用

wrap_and_more 是一个用于Flutter的自定义Widget库，它提供了一个名为 WrapAndMore 的组件。这个组件可以在 Wrap 布局中显示子部件，并在子部件数量超过指定的最大行数时处理溢出情况。

功能特点

  • 限制显示的最大行数。
  • 显示超出最大行数的剩余子部件数量。

示例图片 示例图片

开始使用

首先，在你的Flutter项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  wrap_and_more: ^[version]

请将 [version] 替换为最新版本号。

使用方法

导入 wrap_and_more.dart：

import 'package:wrap_and_more/wrap_and_more.dart';

然后在你的 build 方法中添加 WrapAndMore：

WrapAndMore(
   maxRow: 2,
   spacing: 8.0,
   runSpacing: 8.0,
   overflowWidget: (restChildrenCount) {
     return Text(
       '+ $restChildrenCount more',
       style: TextStyle(color: Colors.grey),
     );
   },
   children: [
     // Add your widgets here
   ],
 )

完整示例代码

下面是一个完整的示例，演示如何使用 WrapAndMore：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  static const List<String> categories = [
    "Automotive",
    "Services",
    "Home and application",
    "Beauty and Care",
    "Fashion and Apparel",
    "Technology and Electronics",
    "Health and Wellness",
    "Food and Beverages",
    "Toys and Games",
    "Books and Entertainment",
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Wrap and More"),
        ),
        body: Container(
          padding: const EdgeInsets.all(16),
          width: 500,
          child: WrapAndMore(
            maxRow: 3,
            spacing: 5,
            runSpacing: 5,
            overflowWidget: (restChildrenCount) {
              return MyChip(text: "+$restChildrenCount");
            },
            children: categories
                .map(
                  (e) => MyChip(text: e),
                )
                .toList(),
          ),
        ),
      ),
    );
  }
}

class MyChip extends StatelessWidget {
  final String text;
  const MyChip({
    Key? key,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
          color: Colors.grey, borderRadius: BorderRadius.circular(10)),
      child: Text(
        text,
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

关键参数及解释

参数名 解释
key WrapAndMore 的Key，用于调用 WrapAndMoreState
maxRow 在 Wrap 中要显示的最大行数
overflowWidget 当子部件超出 maxRow 时显示的溢出部件，接受一个表示剩余子部件数量的整数作为输入
spacing 控制 Wrap 中垂直方向上子部件之间的间距
runSpacing 控制 Wrap 中水平方向上子部件之间的间距
children 要在 Wrap 中显示的子部件列表

如果你遇到任何问题或有功能请求，请在GitHub页面上提交issue。


更多关于Flutter布局辅助插件wrap_and_more的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter布局辅助插件wrap_and_more的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，wrap_and_more 是一个用于 Flutter 的布局辅助插件，它扩展了 Wrap 布局的功能，使其更加灵活和强大。以下是一个关于如何使用 wrap_and_more 插件的代码示例，以便你更好地理解和应用这个插件。

首先，确保你已经在 pubspec.yaml 文件中添加了 wrap_and_more 依赖：

dependencies:
  flutter:
    sdk: flutter
  wrap_and_more: ^最新版本号  # 替换为实际最新版本号

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

以下是一个简单的 Flutter 应用示例，展示了如何使用 wrap_and_more 插件：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> children = List.generate(20, (index) {
      return Chip(
        label: Text('Chip $index'),
        backgroundColor: Colors.primary.withOpacity(0.7),
      );
    });

    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap and More Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: WrapAndMore(
          // 设置主轴方向
          axis: Axis.horizontal,
          // 设置主轴的对齐方式
          alignment: WrapAlignment.start,
          // 设置子元素之间的间距
          spacing: 8.0,
          // 设置子元素在主轴上的间距（如果主轴是水平方向，则为水平间距）
          runSpacing: 8.0,
          // 允许子元素在主轴方向溢出（如果为true，则子元素将不会被截断）
          allowOverflow: false,
          // 子元素列表
          children: children,
        ),
      ),
    );
  }
}

代码说明：

  1. 导入依赖：

    • 导入 flutter/material.dart 用于基础 Flutter 组件。
    • 导入 wrap_and_more/wrap_and_more.dart 用于 WrapAndMore 组件。

  2. 应用结构：

    • MyApp 是一个无状态组件，定义了应用的根 MaterialApp。
    • MyHomePage 是主页，它包含一个 Scaffold，其中包含一个 AppBar 和一个带有 WrapAndMore 组件的 Padding。

  3. 生成子元素：

    • 使用 List.generate 方法生成 20 个 Chip 组件作为子元素。

  4. WrapAndMore 组件：

    • axis 属性设置主轴方向为水平（Axis.horizontal）。
    • alignment 属性设置主轴的对齐方式为开始（WrapAlignment.start）。
    • spacing 属性设置子元素之间的垂直间距（因为主轴是水平的）。
    • runSpacing 属性设置子元素在主轴方向上的间距（水平间距）。
    • allowOverflow 属性设置为 false，表示不允许子元素在主轴方向溢出（可以根据需要设置为 true）。

通过运行这个示例，你可以看到 WrapAndMore 组件如何自动换行布局子元素，并可以根据需要调整其属性来实现不同的布局效果。

回到顶部