Flutter水平分隔线插件flutter_horizontal_divider的使用

flutter_horizontal_divider简介

flutter_horizontal_divider 是一个基于 VerticalDivider 的 Flutter 水平分隔线插件。

支持的平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter Desktop

在线预览

以下是一个基本的水平分隔线示例：

如何使用

创建一个 HorizontalDivider 小部件

class BasicExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return HorizontalDivider(
      // 设置颜色为蓝色
      color: Colors.blue,
      // 设置高度为10.0
      height: 10.0,
      // 设置厚度为4.0
      thickness: 4.0,
      // 设置起始缩进为20.0
      indent: 20.0,
      // 设置结束缩进为20.0
      endIndent: 20.0,
    );
  }
}

完整示例代码

以下是完整的示例代码，展示如何在 Flutter 应用中使用 flutter_horizontal_divider 插件：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_horizontal_divider/flutter_horizontal_divider.dart';

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

class HorizontalDividerExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义颜色、大小、厚度和边距
    final color = Colors.blue;
    final size = 10.0;
    final thickness = 4.0;
    final padding = 20.0;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('水平分隔线示例')),
        body: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 添加水平分隔线示例
              ...divided(
                context,
                title: '水平分隔线',
                scrollDirection: Axis.vertical,
                divider: HorizontalDivider(
                  color: color,
                  height: size,
                  thickness: thickness,
                  indent: padding,
                  endIndent: padding,
                ),
              ),
              SizedBox(height: 20),
              // 添加垂直分隔线示例
              ...divided(
                context,
                title: '垂直分隔线',
                scrollDirection: Axis.horizontal,
                divider: VerticalDivider(
                  color: color,
                  width: size,
                  thickness: thickness,
                  indent: padding,
                  endIndent: padding,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 用于生成带分隔线的列表项
  List<Widget> divided(
    BuildContext context, {
    String title,
    Axis scrollDirection,
    Widget divider,
  }) {
    return [
      Padding(
        padding: EdgeInsets.only(bottom: 5.0),
        child: Text(
          title,
          textAlign: TextAlign.start,
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      Expanded(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black38),
          ),
          child: ListView(
            scrollDirection: scrollDirection,
            children: [
              Icon(Icons.music_note, color: Colors.green),
              divider,
              Icon(Icons.pets, color: Colors.pink),
            ],
          ),
        ),
      )
    ];
  }
}

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

1 回复

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


flutter_horizontal_divider 是一个用于在 Flutter 应用中创建水平分隔线的插件。它可以帮助你在 UI 中轻松地添加分隔线，以增强界面的可读性和美观性。

安装

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

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

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

使用

安装完成后，你可以在你的 Flutter 应用中使用 flutter_horizontal_divider 来创建水平分隔线。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Horizontal Divider Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Above the divider'),
              HorizontalDivider(),  // 默认分隔线
              Text('Below the divider'),
              SizedBox(height: 20),  // 添加一些间距
              Text('Customized divider'),
              HorizontalDivider(
                color: Colors.red,  // 自定义颜色
                thickness: 2.0,     // 自定义厚度
                indent: 20.0,       // 左侧缩进
                endIndent: 20.0,    // 右侧缩进
              ),
              Text('Below the customized divider'),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部