流式布局

Fluid layouts 允许您从单个代码库为移动、Web 和桌面创建响应式布局。

Fluid-Layout

开始吧

安装它

在此处按照安装流程进行操作 这里

理解流式布局

流式布局旨在帮助跨所有不同屏幕尺寸构建响应式体验。
基于 Bootstrap 方法，FluidLayout 计算一个内容内边距 (fluid_padding)，该内边距随父级大小而变化。Fluid 小部件使用该内边距来设置其大小

fluid

屏幕尺寸被划分为 6 个断点：xs, s, m, l, xl，并且可以通过 FluidLayout.of(context).fluidBreakpoint 或 context.breakpoint 访问。

您可以通过 FluidValue 类为不同屏幕尺寸创建值 (int, num, objects, functions, ... 任何变量类型)。最简单的方法是

final value = context.fluid(defaultValue, 
  xs: xsValue,  //if null xs would be defaultValue
  s:  sValue,   //if null s would be defaultValue
  m:  mValue,   //if null m would be defaultValue
  l:  lValue,   //if null l would be defaultValue
  xl: xlValue   //if null xl would be defaultValue
 )

示例

FluidLayout & Fluid

查看 Web 示例

class BasicFluidLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Container(
        child: FluidLayout(
          child: Fluid(
            child: Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Fluid width',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

有一个固定的 horizontalPadding 参数，可以更改所有 FluidLayout 或仅更改单个 Fluid 容器

对于 CustomScrollView，有一个 SliverFluid 等同于 Fluid

FluidGridView

查看 FluidGridView Web 示例

FluidGridView(
  children: List.filled(
    100,
    FluidCell.withFluidHeight(
      size: context.fluid(3, m: 3, s: 4, xs: 6),
      heightSize: context.fluid(3, m: 3, s: 4, xs: 6),
      child: CustomCard(
        color: Colors.red,
        child: Center(child: Text('Item')),
      )),
    ),
)

可自定义参数 [double spacing, ScrollPhysics physics, bool shrinkWrap] 和 bool fluid

FluidCell 有三种构建单元格的方法

  • FluidCell.fit({size, child})
  • FluidCell.withFluidHeight({size, heightSize, child})
  • FluidCell.withFixedHeight({size, height, child})

对于 CustomScrollView，有一个 SliverFluidGrid 等同于 FluidGridView

条件布局

查看 条件布局 Web 示例

if(FluidLayout.of(context).fluidBreakpoint.isLargerThanM)
   return Container(color: Colors.red)
else
   return Container(color: Colors.red)

请记住，您可以使用 context.breakpoint 作为 FluidLayout.of(context).fluidBreakpoint

将全宽小部件与流式布局结合使用

流式布局可以在应用内的任何位置构建，并且它们将根据父级大小计算其约束，此外，在我们需要全屏小部件的情况下，它们可以非常轻松地组合。

  1. 带有水平滚动行的流式布局

GitHub

https://github.com/jamesblasco/fluid_layout