Flutter网格布局插件bootstrap_like_grid的使用

一个类似Bootstrap的网格系统

组件

• Container
• Row
• Column

BSContainer

BSContainer 是Bootstrap Like Grid的根组件。BSContainer 必须是 BSRow 和 BSColumn 的祖先。

属性

• fluid

  • 如果为 true，则容器始终处于最大大小。
  • 默认值为 false。

• maxWidthIdentifier

  • 设置容器的最大宽度。
  • 如果使用此选项，则必须设置 fluid 为 false。
  • 可选值：
    • xxl = 1320
    • xl = 1140
    • lg = 960
    • md = 720
    • sm = 540

• children

  • 只能传递 children 或 builder 中的一个。
  • 一组 Widget。
  • 不必是 BSRow，但 BSRow 必须是 BSContainer 的子级。

• builder

  • 只能传递 children 或 builder 中的一个。
  • 一个返回 Widget 列表的函数，通过传递给函数的上下文可以访问 BSContainerInheritance 数据。
  • 返回的子项不必是 BSRow，但 BSRow 必须是 BSContainer 的子级。

• 默认情况

  • 宽度基于最近的 MediaQueryData，通常是 MaterialApp，通常给出屏幕大小。
  • 屏幕宽度断点：
    • xxl >= 1400
    • xl >= 1200
    • lg >= 992
    • md >= 768
    • sm >= 576
  • 基于屏幕断点的宽度：
    • xxl = 1320
    • xl = 1140
    • lg = 960
    • md = 720
    • sm = 540

BSContainerInheritance

• BSBreakPointLabels 枚举表示断点标签

  • xxl
  • xl
  • lg
  • md
  • sm
  • none

• BSContainerInheritance.containerWidths

  • 将 BSBreakPointLabels 映射到容器宽度。

• BSContainerInheritance.breakPoints

  • 将 BSBreakPointLabels 映射到屏幕宽度。

• 允许 BSContainer 的子级访问容器的

  • containerWidth
  • currentBSBreakPointLabel

BSRow

BSRow 根据父级 BSContainerInheritance 的 currentBSBreakPointLabel 确定是行还是列。

属性

• children
  • 所有子项必须是 BSColumn，或者在该分支的底部之前嵌套了一个 BSColumn。
    • 如果 BSColumn 嵌套在一个小部件中，则该小部件必须将 BSColumn 嵌套在其 child 属性下，否则 BSRow 将无法找到其数据。
    • BSColumn 的 breakPoints 用于确定 BSRow 当前轴。

BSRowInheritance

BSRowInheritance 向子项传递 BSRow 的 currentAxis，用于 BSColumn 计算列宽。

BSColumn

BSColumn 包含要在Bootstrap风格网格系统中显示的小部件，可以从父级 BSContainer 宽度的 1/12 到 12/12，基于传入的断点。

属性

• breakPoints

  • 一个字符串列表。
  • 可以有以下前缀：
    • col-*
    • col-sm-*
    • col-md-*
    • col-lg-*
    • col-lx-*
    • col-xxl-*
  • 后缀替换前缀中的 *，并且可以是从 0 到 12（包括）。
  • 根据屏幕断点设置所需的断点。

• children

  • 只能传递 children 或 builder 中的一个。
  • 一组 Widget。

• builder

  • 只能传递 children 或 builder 中的一个。
  • 一个返回 Widget 列表的函数，通过传递给函数的上下文可以访问 BSColumnInheritance 数据。

BSColumnInheritance

• 将父级 BSColum 的 currentWidth 传递给其子项。

基本示例

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: BSContainer(
          children: const [
            Text("A widget just in the container"),
            BSRow(
              children: [
                BSColumn(
                  breakPoints: ["col-md-6"],
                  children: [
                    Text("1/2 width until smaller than md"),
                  ],
                ),
                BSColumn(
                  breakPoints: ["col-md-6"],
                  children: [
                    Text("1/2 width until smaller than md"),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

嵌套 BSColumn

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: BSContainer(
          children: [
            const Text("A widget just in the container"),
            BSRow(
              children: [
                Container(
                  color: Colors.yellow,
                  child: const BSColumn(
                    breakPoints: ["col-md-6"],
                    children: [
                      Text("1/2 width until smaller than md"),
                    ],
                  ),
                ),
                
                // 嵌套的 BSColumn，注意这个小部件有一个 child 属性，
                // 而且 BSColumn 嵌套在这个 child 属性下
                Container(
                  color: Colors.teal,
                  child: const BSColumn(
                    breakPoints: ["col-md-6"],
                    children: [
                      Text("1/2 width until smaller than md"),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

访问继承的数据

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: BSContainer(
          // 使用 builder 获取正确的上下文以访问 BSContainerInheritance
          builder: (context) {
            return [
              BSRow(
                children: [
                  BSColumn(
                    children: [
                      // 打印容器宽度
                      Text(
                        "Container Width: ${BSContainerInheritance.of(context).containerWidth}",
                      ),
                    ],
                  ),
                ],
              ),
            ];
          },
        ),
      ),
    ),
  );
}