Flutter布局简化插件easy_layout的使用
Flutter布局简化插件easy_layout的使用
EasyLayout 是一组用于创建具有指定间距的子组件布局系统的小组件。这些间距可以被嵌套的组件继承。
开始使用
布局需要包裹在一个 EasyLayout 组件内，在其中你可以设置子组件之间的默认水平和垂直间距。
你可以放置任何组件，如果需要将多个组件垂直排列，并且在它们之间设置特定的距离，则必须用 EasyLayoutColumn 包裹它们。
EasyLayout(
hSpacing: 24,
vSpacing: 16,
child: EasyLayoutColumn(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
],
),
)
在具有指定子组件间距的 EasyLayout 中，你可以嵌套另一个具有不同子组件间距的 EasyLayout，并且其中的所有 EasyLayoutColumn、EasyLayoutRow 和 EasyLayoutAuto 都会继承新的值。未指定的间距将从父级 EasyLayout 中继承。
EasyLayout(
hSpacing: 24,
vSpacing: 16,
child: EasyLayoutColumn(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
EasyLayout(
vSpacing: 32,
children: [
Container(
width: 100,
height: 100,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.cyan,
),
],
),
],
),
)
垂直布局
要将组件垂直排列，可以使用 EasyLayoutColumn 包裹它们。
EasyLayout(
hSpacing: 24,
vSpacing: 16,
child: EasyLayoutColumn(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
],
),
)
水平布局
要将组件水平排列，可以使用 EasyLayoutRow 包裹它们。
EasyLayout(
hSpacing: 24,
vSpacing: 16,
child: EasyLayoutRow(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
],
),
)
混合布局
你可以在任何组合中使用 EasyLayoutColumn 和 EasyLayoutRow 组件。
EasyLayout(
hSpacing: 24,
vSpacing: 16,
child: EasyLayoutColumn(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
// Row
EasyLayoutRow(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
],
),
],
),
)
空间分布
要在 EasyLayoutColumn 或 EasyLayoutRow 中指定子组件之间的空间分布比例，可以使用 EasyLayoutFlexible 包裹子组件，并设置 flex 参数的值。
EasyLayout(
hSpacing: 24,
vSpacing: 16,
child: EasyLayoutRow(
children: [
EasyLayoutFlexible(
flex: 3,
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
),
EasyLayoutFlexible(
flex: 7,
child: Container(
width: 100,
height: 100,
color: Colors.teal,
),
),
],
),
)
自动布局
可以使用 EasyLayoutAuto 组件来根据屏幕宽度的变化自动改变水平或垂直布局。
toggleWidth 参数指定了水平布局的最小宽度，如果宽度小于指定值，布局将切换为垂直布局。
EasyLayout(
hSpacing: 24,
vSpacing: 16,
child: EasyLayoutAuto(
toggleWidth: 768,
children: [
EasyLayoutFlexible(
flex: 3,
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
),
EasyLayoutFlexible(
flex: 7,
child: Container(
width: 100,
height: 100,
color: Colors.teal,
),
),
],
),
)
流式布局
可以使用 EasyLayoutFluid 组件来构建响应式界面。
这是一个 Fluid 组件的包装器，但使用了 EasyLayout 的间距。
间距组件
可以通过 EasyLayoutSpacing 设置某些子组件之间的间距，该间距不同于 EasyLayout 中设置的间距。
你也可以使用 EasyLayoutSpacing 来设置 Column、Row、Flex 中的子组件间距。
分割线组件
可以通过 EasyLayoutDivider 在某些子组件之间设置带有间距的分割线。
EasyLayoutDivider 不能在 EasyLayoutAuto 中使用。
当在 EasyLayoutColumn 或 EasyLayoutRow 中使用时，必须手动指定 axis 属性（垂直或水平）。
示例代码
以下是完整的示例代码：
import 'package:easy_layout/easy_layout.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'EasyLayout Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ExampleScreen(),
);
}
}
class ExampleScreen extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
EasyLayout.defaultHSpacing = 24;
EasyLayout.defaultVSpacing = 16;
return Scaffold(
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 32),
child: EasyLayout(
// hSpacing: 24,
// vSpacing: 16,
child: EasyLayoutColumn(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
// Row
EasyLayoutRow(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
],
),
// Row (widths)
EasyLayoutRow(
spacing: 16,
children: [
EasyLayoutFlexible(
flex: 3,
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
),
EasyLayoutFlexible(
flex: 7,
child: Container(
width: 100,
height: 100,
color: Colors.teal,
),
),
],
),
// Responsive
EasyLayoutAuto(
toggleWidth: 768,
children: [
EasyLayoutFlexible(
flex: 3,
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
),
EasyLayoutFlexible(
flex: 7,
child: Container(
width: 100,
height: 100,
color: Colors.teal,
),
),
],
),
// EasyLayoutRow with Spacers and Dividers
EasyLayoutRow(
children: [
Container(
width: 100,
height: 100,
color: Colors.orange,
),
EasyLayoutSpacing(
hSpacing: 50,
),
Container(
width: 100,
height: 70,
color: Colors.teal,
),
EasyLayoutDivider(
axis: Axis.vertical,
thickness: 2,
color: Colors.red,
startIndent: 10,
endIndent: 10,
),
Container(
width: 100,
height: 100,
color: Colors.amber,
),
],
),
// EasyLayoutColumn with Spacers and Dividers
EasyLayoutColumn(
spacing: 8,
children: [
Container(
width: 100,
height: 20,
color: Colors.orange,
),
EasyLayoutSpacing(
// vSpacing: 30,
),
Container(
width: 100,
height: 20,
color: Colors.teal,
),
EasyLayoutDivider(
// axis: Axis.vertical,
thickness: 2,
color: Colors.red,
startIndent: 10,
endIndent: 10,
),
Container(
width: 100,
height: 20,
color: Colors.amber,
),
],
),
// Generic Row with Spacers
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
width: 100,
height: 100,
color: Colors.orange,
),
),
EasyLayoutSpacing(
hSpacing: 50,
),
Expanded(
child: Container(
width: 100,
height: 100,
color: Colors.teal,
),
),
EasyLayoutSpacing(),
Expanded(
child: Builder(
builder: (context) => Container(
width: 100,
height: 100,
color: Colors.amber,
alignment: Alignment.center,
child: Text(
'h: ${EasyLayout.of(context)?.hSpacing}, v: ${EasyLayout.of(context)?.vSpacing}',
style: TextStyle(color: Colors.white),
),
),
),
),
],
),
// Fluid
EasyLayoutFluid(
children: [
Fluidable(
fluid: 1,
minWidth: 200,
child: Container(
height: 100,
color: Colors.orange,
),
),
Fluidable(
fluid: 1,
minWidth: 300,
child: Container(
height: 100,
color: Colors.teal,
),
),
],
),
],
),
),
),
),
);
}
}
更多关于Flutter布局简化插件easy_layout的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter布局简化插件easy_layout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，easy_layout 是一个用于简化 Flutter 布局的插件。它通过提供一些预定义的布局构建器，使布局代码更加简洁和直观。以下是一些使用 easy_layout 的代码示例，展示如何简化常见的布局任务。
首先，确保在 pubspec.yaml 文件中添加 easy_layout 依赖：
dependencies:
flutter:
sdk: flutter
easy_layout: ^x.y.z # 替换为最新版本号
然后，运行 flutter pub get 以获取依赖。
示例代码
1. 使用 ColumnLayout
ColumnLayout 可以用来简化垂直方向的布局。
import 'package:flutter/material.dart';
import 'package:easy_layout/easy_layout.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ColumnLayout 示例')),
body: ColumnLayoutBuilder(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
LayoutItem(
child: Text('第一项', style: TextStyle(fontSize: 24)),
),
LayoutItem(
flex: 2, // 占据两倍的空间
child: Container(color: Colors.blueGrey[100], height: 50),
),
LayoutItem(
child: Text('第三项', style: TextStyle(fontSize: 24)),
),
],
),
),
);
}
}
2. 使用 RowLayout
RowLayout 可以用来简化水平方向的布局。
import 'package:flutter/material.dart';
import 'package:easy_layout/easy_layout.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('RowLayout 示例')),
body: RowLayoutBuilder(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
LayoutItem(
child: Icon(Icons.home, color: Colors.blue),
),
LayoutItem(
flex: 2,
child: Text('这是一个标题', style: TextStyle(fontSize: 24)),
),
LayoutItem(
child: Icon(Icons.arrow_forward, color: Colors.blue),
),
],
),
),
);
}
}
3. 使用 StackLayout
StackLayout 可以用来简化堆叠布局。
import 'package:flutter/material.dart';
import 'package:easy_layout/easy_layout.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('StackLayout 示例')),
body: StackLayoutBuilder(
alignment: Alignment.center,
children: [
LayoutItem(
child: Container(width: 100, height: 100, color: Colors.red),
),
LayoutItem(
child: Container(width: 80, height: 80, color: Colors.blue),
),
LayoutItem(
child: Container(width: 60, height: 60, color: Colors.green),
),
],
),
),
);
}
}
总结
easy_layout 插件通过提供 ColumnLayoutBuilder, RowLayoutBuilder, 和 StackLayoutBuilder 等构建器，大大简化了 Flutter 的布局代码。每个布局构建器都允许你通过 LayoutItem 来定义子项，并可以方便地设置交叉轴对齐方式、弹性系数等属性。这使得布局变得更加直观和易于维护。
