Flutter自适应分隔线插件adaptive_divider的使用

Flutter自适应分隔线插件adaptive_divider的使用

Divider 可以轻松添加到灵活的部件中，如 Columns 和 Rows，并具有圆角以增加视觉吸引力。

开始使用

在你的库中添加以下导入：

import 'package:adaptive_divider/adaptive_divider.dart';

使用方法

build(BuildContext context) {
    List<Widget> children = [
        WidgetA(),
        AdaptiveDivider(),
        WidgetB(),
        AdaptiveDivider(),
        WidgetC(),
    ];
    if (row) {
        return Row(
            children: children,
        );
    } else {
        return Column(
            children: children,
        );
    }
}

示例代码

以下是使用 AdaptiveDivider 的完整示例代码：

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

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Text('这是一条水平分隔线'),
              // 添加一个带有圆角的水平分隔线
              AdaptiveDivider(
                radius: 8,   // 设置圆角半径为8
                thickness: 3, // 设置分隔线厚度为3
                color: Colors.amber, // 设置分隔线颜色为琥珀色
              ),
              Row(
                children: [
                  Text('这是一条垂直分隔线'),
                  // 添加一个带有圆角的垂直分隔线
                  AdaptiveDivider(
                    radius: 8,           // 设置圆角半径为8
                    crossAxisExtent: 10, // 设置垂直分隔线的长度为10
                    thickness: 3,        // 设置分隔线厚度为3
                    color: Colors.amber, // 设置分隔线颜色为琥珀色
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自适应分隔线插件adaptive_divider的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自适应分隔线插件adaptive_divider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


adaptive_divider 是一个用于 Flutter 的自适应分隔线插件，它可以根据不同的设备屏幕宽度和方向自动调整分隔线的长度和样式。这个插件非常适合在需要根据屏幕尺寸动态调整布局时使用。

安装

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

dependencies:
  flutter:
    sdk: flutter
  adaptive_divider: ^1.0.0  # 请使用最新版本

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

使用方法

adaptive_divider 提供了多种方式来创建自适应分隔线。以下是一些常见的用法示例：

基本用法

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Divider Example'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('Above the divider'),
            AdaptiveDivider(),  // 默认分隔线
            Text('Below the divider'),
          ],
        ),
      ),
    );
  }
}

自定义分隔线样式

你可以通过 AdaptiveDivider 的构造函数来自定义分隔线的样式，例如颜色、高度、缩进等。

AdaptiveDivider(
  color: Colors.blue,  // 分隔线颜色
  thickness: 2.0,      // 分隔线厚度
  indent: 20.0,        // 左侧缩进
  endIndent: 20.0,     // 右侧缩进
);

根据屏幕宽度调整分隔线长度

adaptive_divider 的核心功能是自动根据屏幕宽度调整分隔线的长度。你可以通过 widthFactor 参数来控制分隔线占据父容器宽度的比例。

AdaptiveDivider(
  widthFactor: 0.8,  // 分隔线占据父容器宽度的80%
  color: Colors.red,
  thickness: 1.0,
);

横向和纵向分隔线

默认情况下，AdaptiveDivider 是横向的分隔线。如果你需要纵向的分隔线，可以设置 vertical 参数为 true。

AdaptiveDivider(
  vertical: true,     // 纵向分隔线
  color: Colors.green,
  thickness: 1.0,
  heightFactor: 0.5,  // 分隔线占据父容器高度的50%
);

示例代码

以下是一个完整的示例，展示了如何使用 adaptive_divider 创建一个包含自适应分隔线的简单界面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Divider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Divider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Above the divider'),
            AdaptiveDivider(
              color: Colors.blue,
              thickness: 2.0,
              indent: 20.0,
              endIndent: 20.0,
              widthFactor: 0.8,
            ),
            Text('Below the divider'),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Left of the divider'),
                AdaptiveDivider(
                  vertical: true,
                  color: Colors.green,
                  thickness: 1.0,
                  heightFactor: 0.5,
                ),
                Text('Right of the divider'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部