24Flutter 布局 Widget —— 线性布局.pdfVIP

Flutter布局Widget —— 线性布 局 线性布局 可以将 ⼦Widget 在同⼀个⽅向(⽔平和垂直)上排列. Flutter 的线性布局，有两个: 1. Row (https://docs.flutter.io/flutter/widgets/Row- class.html) ：⽔平⽅向的线性布局 2. Column (https://docs.flutter.io/flutter/widgets/Column- class.html) ：垂直⽅向的线性布局 Row 和 Column 都继承⾃ 性布局 Fle ，其实就是确定了主轴⽅向 的 Fle ，其余的⽤法和 Fle ⼀致。 Row Row 可以在⽔平⽅向排列其 ⼦widget。 代码所在位置 flutter_widget_demo/lib/linear/RowWidget.dart Row 的使⽤ Row 是⽔平排列，给其 children 参数添加 ⼦Widget 即可，例如： Row( children: Widget[ Text(Hello Flutter), Image asset( images/flutter png, width: 200, ) ], ) Row 在⼀个⻚⾯使⽤的 Demo 代码如下： import package:flutter/material dart; void main() = runApp(RowWidget()); class RowWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: Flutter Demo, theme: ThemeData( primaryColor: Colors blue, ), home: Scaffold( appBar: AppBar(title: Text(Flutter布局 Widget -- 线性布局)), body : Row( children: Widget[ Text(Hello Flutter), Image asset( images/flutter png, width: 200, ) ], ), ), ); } } 运⾏效果： Row 的 children 有两个，分别是 Te t 和 Image，这两个按照⽔平 ⽅向排列。 Row 的构造函数及参数说明 Row 的构造函数为： class Row extends Flex { Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment start, MainAxisSize mainAxisSize = MainAxisSize max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment center, TextDirection textDirection, VerticalDirection verticalDirection = VerticalDirection down, TextBaseline textBaseline, ListWidget children = const Widget[], }) : super( children: children, key : key, direction: Axis horizontal, mainAxisAlignment: mainAxisAlignment, mainAxisSize: mainAxisSize, crossAxisAlignment: crossAxisAlignme