Flutter布局:Padding、Align、Center、FittedBox、AspectRatio、ConstrainedBox、UnconstrainedBox


Flutter中拥有30多种预定义的布局widget,常用的有Container、Padding、Center、Flex、Row、Colum、ListView、GridView。
基本分类

  • 基础布局组件:Container(容器布局),Center(居中布局),Padding(填充布局),Align(对齐布局),Colum(垂直布局),Row(水平布局),Expanded(配合Colum,Row使用),FittedBox(缩放布局),Stack(堆叠布局),overflowBox(溢出父视图容器)。
  • 宽高尺寸处理:SizedBox(设置具体尺寸),ConstrainedBox(限定最大最小宽高布局),LimitedBox(限定最大宽高布局),AspectRatio(调整宽高比),FractionallySizedBox(百分比布局)
  • 列表和表格处理:ListView(列表),GridView(网格),Table(表格)
  • 其它布局处理:Transform(矩阵转换),Baseline(基准线布局),Offstage(控制是否显示组件),Wrap(按宽高自动换行布局)

Padding(填充布局)

一个widget, 会给其子widget添加指定的填充
在这里插入图片描述
Padding的布局分为两种情况:

  • 当child为空的时候,view会无限大
  • 当child不为空的时候,Padding会将布局约束传递给child,根据设置的padding属性,缩小child的布局尺寸。然后Padding将自己调整到child设置了padding属性的尺寸,在child周围创建空白区域。
import 'package:flutter/material.dart';

void main() => runApp(
      new MaterialApp(home: new MyApp()),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: new Center(//Container位于body中心位置
        child: new Container(
        	//设置后RaisedButton大小不变,Container围绕这RaisedButton向外扩大8像素
          padding: EdgeInsets.all(8),
          color: Colors.blue,
          child: new RaisedButton(
            //padding: EdgeInsets.all(20),
            color: Colors.white,
            onPressed: () {},
            child: Text(
              '按钮',
              style:
                  TextStyle(color: Colors.black, backgroundColor: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Align(对齐布局)

一个widget,它可以将其子widget对齐,并可以根据子widget的大小自动调整大小。
在这里插入图片描述

属性

const Align({
    Key key,
    this.alignment: Alignment.center,//对齐方式,默认居中对齐 
    this.widthFactor,//宽度因子,如果设置的话,Align的宽度就是child的宽度乘以这个值,不能为负数。
    this.heightFactor,//高度因子,如果设置的话,Align的高度就是child的高度乘以这个值,不能为负数。
    Widget child
  })

例子


void main() => runApp(
      new MaterialApp(home: new MyApp()),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: new Align(
        alignment: Alignment.center,
        widthFactor: 2,
        child: new Container(
          //padding: EdgeInsets.all(8),
          color: Colors.blue,
          child: new RaisedButton(
            //padding: EdgeInsets.all(20),
            color: Colors.white,
            onPressed: () {},
            child: Text(
              '按钮',
              style:
                  TextStyle(color: Colors.black, backgroundColor: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Center(居中布局)

将其子widget居中显示在自身内部的widget
在这里插入图片描述
继承自Align,默认居中并且宽度和高度因子同Align一样。没什么好说的!

FittedBox(缩放布局)

按自己的大小调整其子widget的大小和位置。

  • 如果外部有约束的话,按照外部约束调整自身尺寸,然后缩放调整child,按照指定的条件进行布局;
  • 如果没有外部约束条件,则跟child尺寸一致,指定的缩放以及位置属性将不起作用。
 const FittedBox({
    Key key,
    this.fit = BoxFit.contain,//缩放方式,枚举值。详细缩放效果看源码里面有链接
    this.alignment = Alignment.center,//对齐方式。
    Widget child,
  })
void main() => runApp(
      new MaterialApp(home: new MyApp()),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: new Center(
        child: new Container(
          color: Colors.amberAccent,
          width: 200.0,
          height: 100.0,
          child: new FittedBox(
            fit: BoxFit.fill, //填方式,详细请
            alignment: Alignment.center,
            child: new Container(
              color: Colors.red,
              child: new Text("FittedBox", style: TextStyle(fontSize: 22)),
            ),
          ),
        ),
      ),
    );
  }
}

缩放方式

在这里插入图片描述

AspectRatio(宽高比)

AspectRatio的作用是调整child到设置的宽高比

  • AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展,widget的高度是由宽度和比率决定的,类似于BoxFit中的contain,按照固定比率去尽量占满区域。
  • 如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio最终将会去优先适应布局限制条件,而忽略所设置的比率。

属性

aspectRatio:aspectRatio是宽高比,最终可能不会根据这个值去布局,具体则要看综合因素,外层是否允许按照这种比率进行布局,只是一个参考值。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: new Center(
        child: new Container(
          color: Colors.blue,
          width: 100.0,//仅设置宽100 aspectRatio 1.5 高度为50
          //height: 100.0,宽高同时设置时,aspectRatio失效
          child: new AspectRatio(
            aspectRatio: 1.5,
            child: new RaisedButton(
              color: Colors.red,
              child: new Text("FittedBox", style: TextStyle(fontSize: 22)),
              onPressed: () {},
            ),
          ),
        ),
      ),
    );
  }
}

ConstrainedBox(限定最大最小宽高布局)

设置child widget最大的宽,高度限制和最小的宽高限制范围

  const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  });

minWidth 满足约束条件的最小宽度
maxWidth 满足约束条件的最大宽度;可能是[double.infinity](1.0 / 0.0)
minHeight 满足约束条件的最小高度
maxHeight 满足约束条件的最大高度;可能是[double.infinity](1.0 / 0.0)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('首页'),
      ),
      body: new Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(
            maxWidth: 100.0,
            maxHeight: 100.0,
          ),
          child: new Container(
            width: 200.0,
            height: 200.0,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

上面约束最大的宽高为100,child Container设置的宽高为200.最后实际显示的是宽高为100。

UnconstrainedBox

这个控件不做详细介绍了,它跟ConstrainedBox相反,是不添加任何约束条件到child上,让child按照其原始的尺寸渲染。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页