Row(水平布局),Column(垂直布局) 相当于 Android 中的 LinearLayout 的效果。
Row
水平布局是一种常用的布局方式,我们主要用Row组件来完成水平方向的排列,
对于 Row 来说,水平方向是主轴,垂直方向是次轴。示例代码如下:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Container 布局',
home: LayoutDemo(),
);
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Center'),
),
body: Row(
children: <Widget>[
Expanded(
child: Text('左侧文本'),
),
Expanded(
child: Text('中间文本'),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
),
),
],
),
);
}
}
上述代码中 Expanded 使用来平分布局占用比例
上述代码效果图如下:
Column
垂直布局也是一种常用的布局方式,主要使用它来进行纵向的排列,常用属性如下:
对于 Column 来说,纵向就是其主轴,横向就是起次轴。下面是示例代码:
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Center'),
),
body: Column(
children: <Widget>[
Text('文本--1'),
Text('文本--2'),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
),
),
],
),
);
}
}
效果图如下: