Row也是Flutter中罕用的组件
属性介绍以及应用
children : 子元素
@override Widget build(BuildContext context) { return Scaffold( body: Container( color: Colors.cyanAccent, child: Row( children:[ Container( width: 120, height: 120, color: Colors.red, ), Container( width: 120, height: 120, color: Colors.deepPurple, ), ], ), ), ); }
mainAxisAlignment:横向排列形式
@override Widget build(BuildContext context) { return Scaffold( body: Container( color: Colors.cyanAccent, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: widgets, mainAxisSize: MainAxisSize.max, ), ), ); }
MainAxisAlignment.start(默认)
MainAxisAlignment.center
MainAxisAlignment.spaceAround
MainAxisAlignment.spaceBetween
MainAxisAlignment.spaceEvenly 相似于spaceAround
mainAxisSize 以后行撑开的宽度默认为MainAxisSize.max
@override Widget build(BuildContext context) { return Scaffold( body: Container( color: Colors.cyanAccent, child: Row( // mainAxisAlignment: MainAxisAlignment.center, children: widgets, mainAxisSize: MainAxisSize.max, ), ), floatingActionButton: FloatingActionButton( onPressed: switchWidget, child: Icon(Icons.undo), ), ); }
MainAxisSize.max(比照背景色即可发现区别)
MainAxisSize.min
crossAxisAlignment 纵向排列形式(*内部容器须要指定宽高)
@override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Container( width: MediaQuery.of(context).size.width, height: 500, color: Colors.cyanAccent, child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: widgets, mainAxisSize: MainAxisSize.min, ), ), ), ); }
CrossAxisAlignment.start
CrossAxisAlignment.center
CrossAxisAlignment.end
CrossAxisAlignment.stretch
CrossAxisAlignment.baseline(设置该属性时必须配合textBaseline属性)