Flutter布局插件flexi的使用

除了预定义的断点系统（如Material外），您可以创建固定和响应式的布局，适用于不同类型的网格：手稿、列、模块化和基线。

兼容性

Flexi	Flutter	Dart
Flexi 0.1.0 - 更新版本	Flutter 2.0.0 - 更新版本	Dart 2.12.0 - 更新版本

安装 - pubspec.yaml

dependencies:
  flexi: <最新版本>

示例

示例 1 - 预定义布局

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

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

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) =>
      const MaterialApp(
        title: 'Flexi 示例 - 预定义布局',
        home: FlexContainer(
          // 查看其他预定义布局：
          // BootstrapLayout, CarbonLayout, RuleOfThirdsLayout 和 FluidLayout
          layout: MaterialLayout(),
          child: Scaffold(body: HomePage()),
        ),
      );
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) =>
      Center(child: Text(context.flexi.breakpoint.toString()));
}

示例 2 - 自定义布局

import 'dart:collection';

import 'package:flexi/flexi.dart';

// 定义自定义断点枚举
enum CustomBreakpointId { sm, md }

// 创建自定义断点类
class CustomBreakpoint extends Breakpoint<CustomBreakpointId> {
  const CustomBreakpoint({
    required CustomBreakpointId id,
    required double minWidth,
  }) : super(id: id, minWidth: minWidth);
}

// 创建自定义布局类
class CustomLayout extends Layout<CustomBreakpointId, CustomBreakpoint> {
  const CustomLayout();

  [@override](/user/override)
  SplayTreeSet<CustomBreakpoint> get breakpoints =>
      SplayTreeSet.from(<CustomBreakpoint>{
        const CustomBreakpoint(id: CustomBreakpointId.sm, minWidth: 0),
        const CustomBreakpoint(id: CustomBreakpointId.md, minWidth: 600),
      });

  [@override](/user/override)
  LayoutFormat format(double containerWidth, [
    double containerHeight = double.maxFinite,
  ]) =>
      const LayoutFormat(
        columns: 4,
        gutter: 0,
        leftMargin: 0,
        topMargin: 0,
        rightMargin: 0,
        bottomMargin: 0,
      );
}

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

songsunli 1楼•1 个月前

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

Flexi 是一个用于 Flutter 的布局插件，旨在简化复杂的布局设计。它提供了一种声明式的方式来构建灵活的布局，类似于 Flex 和 Wrap，但具有更多的自定义选项和简化的 API。

安装 Flexi

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

dependencies:
  flutter:
    sdk: flutter
  flexi: ^1.0.0  # 请检查最新版本

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

基本用法

Flexi 的核心是 Flexi 小部件，它允许你通过 children 属性来定义子组件，并通过 direction、alignment、spacing 等属性来控制布局。

1. 水平布局

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flexi Example'),
      ),
      body: Flexi(
        direction: Axis.horizontal,
        spacing: 8.0, // 子组件之间的间距
        runSpacing: 8.0, // 行之间的间距（适用于多行布局）
        alignment: FlexiAlignment.center,
        children: [
          Container(width: 50, height: 50, color: Colors.red),
          Container(width: 50, height: 50, color: Colors.green),
          Container(width: 50, height: 50, color: Colors.blue),
        ],
      ),
    );
  }
}

2. 垂直布局

Flexi(
  direction: Axis.vertical,
  spacing: 8.0,
  runSpacing: 8.0,
  alignment: FlexiAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

3. 自适应布局

Flexi 还支持自适应布局，可以根据屏幕宽度自动调整子组件的排列方式。

Flexi(
  direction: Axis.horizontal,
  spacing: 8.0,
  runSpacing: 8.0,
  alignment: FlexiAlignment.center,
  wrap: true, // 允许换行
  children: [
    Container(width: 100, height: 50, color: Colors.red),
    Container(width: 100, height: 50, color: Colors.green),
    Container(width: 100, height: 50, color: Colors.blue),
    Container(width: 100, height: 50, color: Colors.orange),
    Container(width: 100, height: 50, color: Colors.purple),
  ],
)

自定义对齐方式

Flexi 提供了多种对齐方式，可以通过 alignment 属性来设置：

FlexiAlignment.start
FlexiAlignment.center
FlexiAlignment.end
FlexiAlignment.spaceBetween
FlexiAlignment.spaceAround
FlexiAlignment.spaceEvenly

Flexi(
  direction: Axis.horizontal,
  spacing: 8.0,
  alignment: FlexiAlignment.spaceBetween,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

嵌套布局

你可以将 Flexi 嵌套使用，以创建更复杂的布局结构。

Flexi(
  direction: Axis.vertical,
  spacing: 16.0,
  children: [
    Flexi(
      direction: Axis.horizontal,
      spacing: 8.0,
      children: [
        Container(width: 50, height: 50, color: Colors.red),
        Container(width: 50, height: 50, color: Colors.green),
      ],
    ),
    Flexi(
      direction: Axis.horizontal,
      spacing: 8.0,
      children: [
        Container(width: 50, height: 50, color: Colors.blue),
        Container(width: 50, height: 50, color: Colors.orange),
      ],
    ),
  ],
)