Flutter 页面布局中,Padding、Row、Column、Expended组件用法详解

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属性对子组件所占有的显示比例进行动态布局