共计 1531 个字符,预计需要花费 4 分钟才能阅读完成。
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 属性)
正文完