Flutter主轴对齐插件more_main_axis_alignment的使用

Flutter主轴对齐插件more_main_axis_alignment的使用

特性

入门指南

在你的pubspec.yaml文件中添加包依赖：

dependencies:
  more_main_axis_alignment: 1.0.0

在你的Dart文件中导入库：

import 'package:more_main_axis_alignment/more_main_axis_alignment.dart';

使用方法

Flex

MoreFlex(
    direction: Axis.horizontal, // 指定Flex的方向为水平
    moreMainAxisAlignment: MoreMainAxisAlignment.spaceBeside, // 设置主轴对齐方式
    children: [
      for (int i = 0; i < 5; i++)
        Container(
          width: 20,
          height: 20,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
    ],
  ),

Row

MoreRow(
    moreMainAxisAlignment: MoreMainAxisAlignment.spaceBetweenStep, // 设置主轴对齐方式
    children: [
      for (int i = 0; i < 5; i++)
        Container(
          width: 20,
          height: 20,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
    ],
  ),

Column

MoreColumn(
    moreMainAxisAlignment: MoreMainAxisAlignment.custom, // 设置自定义对齐方式
    customList: const [0, 0.25, 0.35, 0.5, 0.98], // 自定义对齐点
    children: [
      for (int i = 0; i < 5; i++)
        Container(
          width: 20,
          height: 20,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
    ],
  ),

完整示例

以下是一个完整的示例，展示了如何使用MoreMainAxisAlignment的不同值来对齐子组件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'MoreMainAxisAlignment'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView.builder(
          itemCount: MoreMainAxisAlignment.values.length,
          itemBuilder: (context, index) {
            return Container(
              color: index.isEven ? Colors.white : Colors.black12,
              padding: const EdgeInsets.symmetric(vertical: 10),
              child: Column(
                children: [
                  MoreFlex(
                    direction: Axis.horizontal,
                    moreMainAxisAlignment: MoreMainAxisAlignment.values[index],
                    customList: const [0, 0.25, 0.35, 0.5, 0.98],
                    separateCount: 3,
                    children: [
                      for (int i = 0; i < 5; i++)
                        Container(
                          width: 20,
                          height: 20,
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                    ],
                  ),
                  Text(MoreMainAxisAlignment.values[index].toShortString()), // 显示当前对齐方式的简短名称
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

extension on MoreMainAxisAlignment {
  String toShortString() {
    return toString().split('.').last; // 将枚举值转换为简短字符串
  }
}