Flutter功能扩展插件flextras的使用

flextras

flextras 是一个包含具有额外功能的 Columns 和 Rows 的集合：

• PaddedColumn / PaddedRow - 在 column/row 外包裹一层 padding
• SeparatedColumn / SeparatedRow - 在每个子元素之间插入任何小部件
• ExpandedScrollingColumn / ExpandedScrollingRow - 允许 column 持有可扩展的子元素，同时在需要时仍然可以滚动。

🔨 Installation 安装

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

dependencies:
  flextras: ^0.0.1

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

⚙ Import 导入

在 Dart 文件中导入 flextras 包：

import 'package:flextras/flextras.dart';

🕹️ Usage 使用方法

PaddedContainer and PaddedRow 带内边距的容器和行

这是一个简单的 Padding 和 Column/Row 的组合，通常需要这样做。虽然非常简单，但可以节省几行代码：

return PaddedColumn(
    padding: EdgeInsets.all(20),
    children: [
        // 子组件
    ]
)

SeparatedColumn and SeparatedRow 分隔的列和行

通常您希望在 Column 或 Row 的元素之间放置一个分隔符。使用 separatorBuilder 方法可以轻松实现：

return SeparatedColumn(
    // 10px gap between each element
    separatorBuilder: () => SizedBox(height: 10),
    children: [
        // 子组件
    ]
)

ExpandedScrollingColumn and ExpandedScrollingRow 可扩展并滚动的列和行

解决了一个常见的用例，即您希望拥有一些可扩展的内容，并且当空间不足时开始滚动。

正常情况下，如果这样做会抛出布局错误：

SingleChildScrollView(
    child: Column(
        children: [
            Expanded(child: ...) // 这将尝试无限扩展 :(
        ]
    )
)

ExpandedScrollingColumn 通过使用内容的自然高度或父视图的高度（取较大值）来修复此问题。

// 这将垂直扩展以填充父级，但在必要时开始滚动
ExpandedScrollingColumn(
    children: [
        Expanded(child: Container(height: 400)),
    ]
)

示例Demo

以下是一个完整的示例，展示了如何使用 flextras 中的各种组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PaddedColumn(
          padding: EdgeInsets.all(20),
          children: [
            Flexible(
              child: ExpandedScrollingRow(children: [
                Expanded(child: Container(width: 400, color: Colors.blue)),
                Expanded(
                    child: Container(
                  width: 400,
                  color: Colors.purple,
                  child: ExpandedScrollingColumn(
                    children: [
                      Text("TOP CONTENT", style: TextStyle(fontSize: 20)),
                      Expanded(
                        child: Container(
                          height: 400,
                          child: Text("MIDDLE CONTENT"),
                          alignment: Alignment.center,
                        ),
                      ),
                      Text("BOTTOM CONTENT", style: TextStyle(fontSize: 20)),
                    ],
                  ),
                )),
              ]),
            ),
            SeparatedRow(
              children: [
                Expanded(child: Container(width: 200, height: 20, color: Colors.green)),
                Expanded(child: Container(width: 200, height: 20, color: Colors.green)),
              ],
              separatorBuilder: () => Text("divider"),
            )
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何使用 PaddedColumn, ExpandedScrollingRow, ExpandedScrollingColumn 和 SeparatedRow 来构建一个复杂的布局结构。您可以根据自己的需求调整这些组件的参数和子组件。