关于flutter:Flutter深入浅出组件篇AspectRatioFractionallySizedBox

37次阅读

共计 2275 个字符,预计需要花费 6 分钟才能阅读完成。

AspectRatio 介绍

AspectRatio 次要的作用是调整子组件设定的宽高比,如播放视频时 16:9 或 4:3 等。

示例代码

本文中很多成果都没有截图,可下载源代码运行我的项目 源代码地址,或者通过视频教程查看 视频教程地址

AspectRatio 构造函数

const AspectRatio({
  Key? key,
  required this.aspectRatio,
  Widget? child,
}) : assert(aspectRatio != null),
     assert(aspectRatio > 0.0),
     // can't test isFinite because that's not a constant expression
     super(key: key, child: child);

AspectRatio 属性和阐明

字段 属性 形容
aspectRatio double 纵横比例
child Widget 子组件

aspectRatio、child

aspectRatio 次要用来设定子组件的纵横比例,而 child 就是须要被设定纵横比例的子组件。

AspectRatio 根本应用

import 'package:flutter/material.dart';

class AspectRatioExample extends StatefulWidget {
  @override
  _AspectRatioExampleState createState() => _AspectRatioExampleState();
}

class _AspectRatioExampleState extends State<AspectRatioExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AspectRatioExample"),
      ),
      body: Container(
        color: Colors.blue,
        alignment: Alignment.center,
        width: double.infinity,
        height: 100.0,
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: Container(color: Colors.orangeAccent,),
        ),
      ),
    );
  }
}

AspectRatio 成果展现

咱们看到橙色盒子的宽度是他父组件的高度 *16/9

FractionallySizedBox 介绍

当咱们须要一个控件的尺寸是绝对尺寸时,比方以后按钮的宽度占父组件的 70%,能够应用 FractionallySizedBox 来实现此成果。

FractionallySizedBox 构造函数

const FractionallySizedBox({
    Key? key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget? child,
}) : assert(alignment != null),
     assert(widthFactor == null || widthFactor >= 0.0),
     assert(heightFactor == null || heightFactor >= 0.0),
     super(key: key, child: child);

FractionallySizedBox 属性和阐明

字段 属性 形容
alignment AlignmentGeometry 子组件的对齐形式
widthFactor double 宽度系数
heightFactor double 高度系数
child Widget 子组件

1、alignment

对于alignment 这个字段在后面的文章中咱们具体讲过,在 Flutter 深入浅出组件篇 —Align、AnimatedAlign 能够看到更具体的介绍

2、widthFactor

子组件绝对于父组件的宽度系数

3、heightFactor

子组件绝对于父组件的高度系数

4、child

子组件

FractionallySizedBox 根本应用

import 'package:flutter/material.dart';

class AspectRatioExample extends StatefulWidget {
  @override
  _AspectRatioExampleState createState() => _AspectRatioExampleState();
}

class _AspectRatioExampleState extends State<AspectRatioExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AspectRatioExample"),
      ),
      body: Container(
        color: Colors.blue,
        alignment: Alignment.center,
        width: 150,
        height: 150.0,
        child: FractionallySizedBox(
          alignment: Alignment.topLeft,
          widthFactor: 1.5,
          heightFactor: 0.5,
          child: new Container(color: Colors.red,),
        ),
      ),
    );
  }
}

FractionallySizedBox 成果展现

咱们看到子组件红色盒子是父组件蓝色盒子的 1.5 倍,所以超出

正文完
 0