Flutter 屏幕适配组件

作者: Pin_ZL | 来源:发表于2020-11-16 11:55 被阅读0次

一、Expanded

Expaned常用于Row, Column, Flex的子元素中；在使用Expanded子Widget的时候，能够填充满剩余空间。

const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
})

flex代表着当前Expanded的宽度（高度）占比系数；
child代表着当前Expanded拥有的子Widget。

代码：

 Container(
  height: 200,
  margin: EdgeInsets.symmetric(horizontal: 10.0),
  child: Row( 
    children: [
      // 第一个区块
      Expanded(
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(4.0)),
              color: Colors.amber.withOpacity(0.5)),
        ),
      ),
      // 间隔
      SizedBox(width: 10.0, height: 10.0),
      // 第二个区块
      Expanded(
        child:  Column(
          children: [
             Expanded( 
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(4.0)),
                  color: Colors.grey.withOpacity(0.5),
                ),
              ),
            ),
             SizedBox(width: 10.0, height: 10.0),
             Expanded(
             child: Row(
                children:[
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(
                          Radius.circular(4.0),
                        ),
                        color: Colors.red.withOpacity(0.5),
                      ),
                    ),
                  ),
                  SizedBox(width: 10.0, height: 10.0),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(4.0),
                          ),
                          color: Colors.blueAccent.withOpacity(0.5)),
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    ],
  ),
)

效果：

image.png

二、Flexible

Flexible也是为小部件提供空间的，但是不会要求子空间填满可用空间；

const Flexible({
    Key? key,
    this.flex = 1,
    this.fit = FlexFit.loose,
    required Widget child,
  }) : super(key: key, child: child);

Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，Row在水平方向，Column在垂直方向)，但是它与Expaned组件不同，它不强制子组件填充可用空间。

Flexible组件必须是Row、Column、Flex等组件的后裔，并且从Flexible到它封装的Row、Column、Flex的路径必须只包括StatelessWidgets或StatefulWidgets组件(不能是其他类型的组件，像RenderObjectWidgets)。

代码：

return Scaffold(
  appBar: AppBar(
    title: Text("Flexible"),
  ),
  body: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Flexible(
        fit:FlexFit.tight,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
            color: Colors.amber.withOpacity(0.5),
          ),
        ),
      ),
      Flexible(
        fit:FlexFit.loose,
        flex: 2,
        child: Container(
          height: 50,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
            color: Colors.yellow.withOpacity(0.5),
          ),
        ),
      ),
      Flexible(
        child: Container(
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
            color: Colors.cyan.withOpacity(0.5),
          ),
        ),
      ),
      Flexible(
        fit:FlexFit.loose,
        child: Container(
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
            color: Colors.red.withOpacity(0.5),
          ),
        ),
      ),
    ],
  ),
);

效果：

image.png

如果在使用Flexible时，设置fit为FlexFit.tight，Flexible和Expanded就一模一样了.
因此Expanded和Flexible的区别就是FlexFit.tight和FlexFit.loose的区别：

tight：必须（强制）填满剩余空间。
loose：尽可能大的填满剩余空间，但是可以不填满。

三、Spacer

Spacer只是一个间距控件，可以用于调节小部件之间的间距，它有一个flex可以进行设置；

const Spacer({Key? key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0),
      super(key: key);

代码：

return Scaffold(
  appBar: AppBar(
    title: Text("Spacer"),
  ),
  body: Center(
    child: Column(
      children: [
        Container(
          height: 50,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
            color: Colors.amber.withOpacity(0.5),
          ),
        ),
        Spacer(flex: 1),
        Container(
          height: 50,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
            color: Colors.blueAccent.withOpacity(0.5),
          ),
        ),
      ],
    ),
  ),
);

效果：

image.png

三、AspectRatio

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。

const AspectRatio({
    Key? key,
    required this.aspectRatio,
    Widget? child,
  }) : assert(aspectRatio != null),
       assert(aspectRatio > 0.0),
       super(key: key, child: child);

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。

AspectRatio作用于父控件，根据aspectRatio计算父控件的宽或者高，AspectRatio的子控件将填充满父控件，子控件的宽高无效。

强制子部件的宽度和高度具有给定的宽高比,可以父容器给定一个宽或者高，来换算另一个值

代码：

return Scaffold(
  appBar: AppBar(
    title: Text("AspectRatio"),
  ),
  body: Center(
      child: AspectRatio(
        aspectRatio: 1,
        child: Container(
          color: Colors.red,
        ),
      )),
);

效果：

image.png

四、Wrap

Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。

Wrap({
    Key? key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.clipBehavior = Clip.none,
    List<Widget> children = const <Widget>[],
  }) : assert(clipBehavior != null), super(key: key, children: children);

this.direction：设置水平局部还是垂直布局，
this.alignment：设置元素的其实位置，
this.spacing：在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距，
this.runAlignment：设置widget与widget在水平或者垂直轴上的间距，
1、WrapAlignment.start//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从顶部开始展示
2、 WrapAlignment.end//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget挨着底部展示
3、 WrapAlignment.center//每一行（列）子Widget在纵（横）轴上的排列，全部子widget在中间展示
4、WrapAlignment.spaceBetween//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示
5、 WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半
6、WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离相等
this.runSpacing：在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距，
this.crossAxisAlignment ：
1、WrapCrossAlignment.start：水平排列时控制全部子widgets的上部对齐，垂直排列时控制全部子widgets的左边对齐，
2、WrapCrossAlignment.end：水平排列时控制全部子widgets的下部对齐，垂直排列时控制全部子widgets的又边对齐，
3、WrapCrossAlignment.center//设置每一行的子Widgets剧中对齐，
this.textDirection：设置每一行（列）的展示，
1、textDirection: TextDirection.ltr：设置每一行（列）的子Widgets从左到右（从上到下）正常显示，正序排列，
2、textDirection: TextDirection.rtl：设置每一行（列）的子Widgets倒序显示，
this.verticalDirection：
1、VerticalDirection.down,//设置行列widgets的展示，正常显示，
2、VerticalDirection.up//倒序展示，比如，在direction: Axis.horizontal时有1、2、3行widgets，设置为up后，展示为3、2、1
this.clipBehavior：内容裁剪选择，这里默认为hardEdge，有none，hardEdge，antiAlias，antiAliasWithSaveLayer四种裁剪行为，hardEdge为允许裁剪但不抗锯齿，这个属性默认就好在实际wrap使用中，当内容超过了wrap所能展示的范围，及时设置为none也是会被裁剪的

代码：

class WrapPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Warp"),
      ),
      body: Container(
          child: Wrap(
              runAlignment: WrapAlignment.spaceBetween,
              alignment: WrapAlignment.start,
              runSpacing: 1,
              children: tags.map((e) => TagItem(e)).toList())),
    );
  }
}

class TagItem extends StatelessWidget {

  final String text;
  final a = Random();
  TagItem(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
      decoration: BoxDecoration(
        color: Colors.cyan,
          border: Border.all(color: Colors.blueAccent.withAlpha(60), width: 1.0),
          borderRadius: BorderRadius.all(Radius.circular(5))),
      child: Container(
        margin: EdgeInsets.all(8),
        child: Text(text),
      ),
    );
  }
}

const List<String> tags = [
  "12",
  "3",
  " 111111",
  "阿佛拍拍拍拍拍",
  "sdzxc",
  "zxc阿弹尽粮绝",
  "hhhh",
  "全球",
  "qe434",
  "2俄企鹅企鹅",
  "'c;vkz;'';zxcl';'",
  "这种",
  "asd9083049",
  "11233"
];

效果：

image.png

Flutter 屏幕适配组件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter

前端开发那些事儿

Flutter