Flutter响应式布局插件bs_flutter_responsive的使用

开始使用

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

dependencies:
  ...
  bs_flutter_responsive: any

响应式网格/网格系统

示例：example.dart

当创建一些Web应用程序时，网格系统非常重要，特别是为了创建响应式布局。此插件有助于解决这一问题。

要创建响应式布局，必须使用 BsRow 和 BsCol 小部件，或者在Bootstrap中使用 class=“row” 和 class=“col-*”。

展示不同屏幕尺寸下的网格系统结果

创建网格系统的行容器

BsRow(
  gutter: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
  children: [
    // 添加列
  ]
);

在行容器中添加列

BsRow(
  // ...
  children: [
    BsCol(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
      ),
      padding: EdgeInsets.all(20.0),
      sizes: ColScreen(sm: Col.col_12, lg: Col.col_6),
      child: Center(child: Text('col-sm-12 col-lg-6')),
    ),
    BsCol(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
      ),
      visibility: BsVisibility.hiddenMd,
      padding: EdgeInsets.all(20.0),
      sizes: ColScreen(sm: Col.col_12, lg: Col.col_6),
      child: Center(child: Text('col-sm-12 col-lg-6 col-hidden-md')),
    ),
    BsCol(
      decoration: BoxDecoration(border: Border.all(color: Colors.black)),
      padding: EdgeInsets.all(20.0),
      sizes: ColScreen(sm: Col.col_12, md: Col.col_12, lg: Col.col_6),
      order: ColOrder(md: 1),
      child: Center(child: Text('col-sm-12 col-md-12 col-md-6 col-order-lg-1')),
    ),
    BsCol(
      decoration: BoxDecoration(border: Border.all(color: Colors.black)),
      padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
      sizes: ColScreen(md: Col.col_6),
      child: BsRow(
        children: [
          BsCol(
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.black),
            ),
            padding: EdgeInsets.all(10.0),
            sizes: ColScreen(md: Col.col_4),
            child: Center(child: Text('Nested col-md-4')),
          ),
          BsCol(
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.black),
            ),
            padding: EdgeInsets.all(10.0),
            sizes: ColScreen(md: Col.col_4),
            offset: ColScreen(lg: Col.col_4),
            child: Center(child: Text('Nested col-md-4 col-offset-lg-4')),
          ),
        ],
      ),
    ),
  ]
)

注意事项

• BsCol 中的 sizes 属性默认值为 Col.col_12 或 100% 的屏幕宽度。
• 如果需要对列进行排序，可以使用 order 属性，并传递 BsScreen 类型的值。
• 如果需要自定义列的偏移量，可以使用 offset 属性，并传递 BsScreen 类型的值。
• BsVisibility.hiddenMd 会将组件隐藏在最大屏幕尺寸为中屏或小于768px的情况下，在更大屏幕上则显示。

完整示例代码

import 'package:bs_flutter_responsive/bs_flutter_responsive.dart';
import 'package:bs_flutter_utils/bs_flutter_utils.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('响应式网格'),
        ),
        body: BsRow(
          margin: EdgeInsets.only(bottom: 20.0),
          gutter: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0, bottom: 5.0),
          children: [
            BsCol(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
              ),
              padding: EdgeInsets.all(20.0),
              sizes: ColScreen(sm: Col.col_12, lg: Col.col_6),
              child: Center(child: Text('col-sm-12 col-lg-6')),
            ),
            BsCol(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
              ),
              visibility: BsVisibility.hiddenMd,
              padding: EdgeInsets.all(20.0),
              sizes: ColScreen(sm: Col.col_12, lg: Col.col_6),
              child: Center(child: Text('col-sm-12 col-lg-6 col-hidden-md')),
            ),
            BsCol(
              decoration: BoxDecoration(border: Border.all(color: Colors.black)),
              padding: EdgeInsets.all(20.0),
              sizes: ColScreen(sm: Col.col_12, md: Col.col_12, lg: Col.col_6),
              order: ColOrder(md: 1),
              child: Center(
                  child: Text('col-sm-12 col-md-12 col-md-6 col-order-lg-1')),
            ),
            BsCol(
              decoration: BoxDecoration(border: Border.all(color: Colors.black)),
              padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
              sizes: ColScreen(md: Col.col_6),
              child: BsRow(
                children: [
                  BsCol(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: Colors.black),
                    ),
                    padding: EdgeInsets.all(10.0),
                    sizes: ColScreen(md: Col.col_4),
                    child: Center(child: Text('Nested col-md-4')),
                  ),
                  BsCol(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: Colors.black),
                    ),
                    padding: EdgeInsets.all(10.0),
                    sizes: ColScreen(md: Col.col_4),
                    offset: ColScreen(lg: Col.col_4),
                    child: Center(child: Text('Nested col-md-4 col-offset-lg-4')),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}