Flutter自定义布局插件elevated_flex的使用

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

Flutter自定义布局插件elevated_flex的使用

关于 elevated_flex

elevated_flex 是一个 Flutter 包装器，允许你在列和行中创建一些子元素高于其他子元素。同时，不会违反它们的顺序和内容适应性。

ElevatedColumn

ElevatedColumn 的构建方式与普通 Column 完全相同，并接受所有相同的参数。你只需要将一个或多个子元素包裹在 Elevated widget 中：

ElevatedColumn(
  mainAxisSize: MainAxisSize.min,
  children: [
    SimpleChild(),
    Elevated(child: SimpleChild(shadow: true)),
    SimpleChild(),
  ],
)

ElevatedRow

ElevatedRow 的构建方式与普通 Row 完全相同，并接受所有相同的参数。你只需要将一个或多个子元素包裹在 Elevated widget 中：

ElevatedRow(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    SimpleChild(),
    Elevated(child: SimpleChild(shadow: true)),
    SimpleChild(),
  ],
)

Flex 参数

ElevatedColumn 和 ElevatedRow widget 接受与标准原型相同的参数：

  • mainAxisAlignment
  • mainAxisSize
  • crossAxisAlignment
  • verticalDirection

因此，你可以安全地在需要的地方进行替换。

为了测试行为，我开发了一个特殊的沙盒屏幕，可以在其中比较标准组件和其 Elevated 模拟的行为。

TODO

该包目前不支持 CrossAxisAlignment.baseline。

示例代码

import 'package:flutter/material.dart';

import 'pages/elevated_column_example.dart';
import 'pages/elevated_row_example.dart';
import 'pages/column_and_row_behavior_example.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      title: 'Elevated Flex Examples',
      home: const ExamplesList(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Examples:'),
        centerTitle: false,
      ),
      body: ListView(
        children: [
          const Divider(height: 11),
          ListTile(
            title: const Text('Elevated Column'),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (_) => const ElevatedColumnExample(),
              ));
            },
          ),
          const Divider(height: 1il),
          ListTile(
            title: const Text('Elevated Row'),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (_) => const ElevatedRowExample(),
              ));
            },
          ),
          const Divider(height:  il),
          ListTile(
            title: const Text('Column and Row Behavior'),
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (_) => const ColumnAndRowBehaviorExample(),
              ));
            },
          ),
          const Divider(height:  il),
        ],
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，elevated_flex 是一个用于 Flutter 的自定义布局插件，它可以帮助开发者创建灵活且易于扩展的布局。虽然这个插件可能不是 Flutter 官方提供的，但假设它提供了类似于 ElevatedButton 和 Flex 的结合功能，我们可以展示如何使用类似的自定义布局插件。

由于我们不能确切知道 elevated_flex 插件的具体 API，我将提供一个示例，展示如何创建一个自定义的 Flutter 布局插件，这个插件将模拟 elevated_flex 可能提供的功能。假设这个插件允许我们创建一个带有提升效果的灵活布局。

首先，我们需要创建一个自定义的 Widget，这里我们称之为 ElevatedFlex。这个 Widget 将结合 ElevatedButton 的样式和 Flex 的布局特性。

import 'package:flutter/material.dart';

class ElevatedFlex extends StatelessWidget {
  final Widget child;
  final MainAxisAlignment mainAxisAlignment;
  final CrossAxisAlignment crossAxisAlignment;
  final double elevation;
  final Color color;
  final EdgeInsetsGeometry padding;

  const ElevatedFlex({
    Key? key,
    required this.child,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.elevation = 4.0,
    this.color = Colors.blue,
    this.padding = const EdgeInsets.all(16.0),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        overlayColor: MaterialStateProperty.all(color),
        elevation: MaterialStateProperty.all(elevation),
        padding: MaterialStateProperty.all(padding),
      ),
      onPressed: () {}, // 可以在这里添加点击事件
      child: LayoutBuilder(
        builder: (context, constraints) {
          return Flex(
            direction: Axis.horizontal, // 可以根据需求修改为 vertical
            mainAxisAlignment: mainAxisAlignment,
            crossAxisAlignment: crossAxisAlignment,
            children: <Widget>[
              Expanded(
                child: child,
              ),
            ],
          );
        },
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ElevatedFlex Example'),
        ),
        body: Center(
          child: ElevatedFlex(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.star, color: Colors.white),
                SizedBox(width: 8),
                Text('Elevated Flex Layout', style: TextStyle(color: Colors.white)),
              ],
            ),
            elevation: 8.0,
            color: Colors.deepPurple,
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          ),
        ),
      ),
    );
  }
}

代码解释

  1. ElevatedFlex 类：

    • 继承自 StatelessWidget。
    • 接受多个参数，包括子 Widget、主轴对齐方式、交叉轴对齐方式、提升高度、颜色和内边距。
    • 在 build 方法中，使用 ElevatedButton 作为外部容器，并应用样式。
    • 使用 LayoutBuilder 和 Flex 来布局子 Widget。

  2. MyApp 类：

    • 创建一个简单的 Flutter 应用。
    • 在 home 属性中使用 Scaffold 和 AppBar。
    • 在 body 中使用 Center 居中显示 ElevatedFlex。

这个例子展示了如何创建一个自定义的 ElevatedFlex Widget，它结合了 ElevatedButton 的样式和 Flex 的布局功能。当然，实际的 elevated_flex 插件可能有更多的功能和配置选项，但这个示例提供了一个起点，展示了如何创建和使用自定义布局插件。

回到顶部