1:在html+Css样式中,标签属性中会有padding这个属性值,但是还在Flutter中并不是所有的组件都有Padding属性,那么如果一个组件没有padding属性,确要达到padding的效果,我们一般是把该组件包装到一个Padding的父组件中,如下;
Container(
child:Padding(
padding:EdgeInsets.fromLTRB(10,10,10,10);//直接可以设置padding值
child:Image.asste(''url');
),
),
2:Row组件为水平布局组件,在指定的一个父组件区域内,对所有的子组件进行水平布局,在项目中用的相当频繁
如下代码:
import 'package:flutter/material.dart';
class OtherPage extends StatefulWidget {
OtherPage({Key? key}) : super(key: key);
@override
_OtherPageState createState() => _OtherPageState();
}
class _OtherPageState extends State {
@override
Widget build(BuildContext context) {
return Container(
height: 400,
width: 400,
decoration: BoxDecoration(
color: Colors.red,
),
child: Row(
mainAxisAlignment: MainAxisAlignment
.spaceEvenly, //横向显示位置 start end spaceEvenly,spaceAround,spaceBetween,center
crossAxisAlignment: CrossAxisAlignment.start, //垂直方向位置,
children: [
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
),
),
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.yellow,
),
),
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
),
),
],
),
);
}
}
3:Column组件为垂直方向布局组件,在指定的父组件中,所有的子组件从上往下布局
用法:
return Column(
mainAxisAlignment :MainAxisAlignment.start,
mainAxisSize : MainAxisSize.max,
crossAxisAlignment : CrossAxisAlignment.center,
// TextDirection? textDirection,
verticalDirection : VerticalDirection.down,
// TextBaseline? textBaseline,
children:[
Text('text1'),
Text('text2'),
Text('text3'),
Text('text4'),
],
);
4:Expended组件一般和Row或者Column组件搭配布局使用,在Row或者Column子组件中使用Expended组件修饰然后可以更具flexd属性对子组件所占有的显示比例进行动态布局