flutter 组件


文中大部分实例代码,来自官方实例

stack 堆叠,多层级

stack默认左上角对齐,组件内部子元素层级关系:后面的在前面的组件上层。
单个组件定位使用Positioned支持top,bottom、left、right设置


import 'package:flutter/material.dart';

class Layout extends StatelessWidget {
  const Layout({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('Stack'),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 90,
              height: 90,
              color: Colors.green,
            ),
            Container(
              width: 80,
              height: 80,
              color: Colors.blue,
            ),
            Positioned(child: Text('定位',style: TextStyle(backgroundColor: Colors.yellowAccent),),top: 0,left: 0,)
          ],
        ));
  }
}

IndexedStack 指定stack中显示那个

index 属性可指定显示那个组件

import 'package:flutter/material.dart';

class Layout extends StatelessWidget {
  const Layout({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('Stack'),
        ),
        body: IndexedStack(
          index: 2,
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 90,
              height: 90,
              color: Colors.green,
            ),
            Container(
              width: 80,
              height: 80,
              color: Colors.blue,
            ),
            Positioned(
              child: Text(
                '定位',
                style: TextStyle(backgroundColor: Colors.yellowAccent),
              ),
              top: 0,
              left: 0,
            )
          ],
        ));
  }
}

FittedBox 适配盒模型

  • 如果父组件有约束,则按照父组件约束调整child的大小。
  • 如果父组件没有约束条件,则按照child大小展示,指定的fit方式和对齐方式不起作用。

FittedBox 和web端背景填充容器类似,fit的方式有:
要隐藏超出父容器部分,请使用clipBehavior: clip.hardEdge和这个放在一个[FittedBox]里。

  • BoxFit.contain 保持宽高比尽可能大的适配容器

    在这里插入图片描述

  • BoxFit.cover尽可能的小,同时仍然覆盖整个目标框。 要剪辑内容,请使用clipBehavior: clip.hardEdge和这个放在一个[FittedBox]里。

    在这里插入图片描述

  • fit: BoxFit.none 没有任何填充样式

    在这里插入图片描述

  • fit: BoxFit.fill 填充父容器(会引起形变)

  • BoxFit.fitWidth 保持子容器宽高比例,宽度占满父容器

  • BoxFit.fitHeight保持子容器宽高比例,高度占满父容器

  • BoxFit.scaleDown子组件是Image(不设置宽高)和BoxFit.contain效果相同,其余情况和BoxFit.none情况相同

import 'package:flutter/material.dart';

class Layout extends StatelessWidget {
  const Layout({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('FittedBox 适配盒模型'),
        ),
        body: Container(
          height: 300,
          width: 200,
          color: Colors.red,
          child: FittedBox(
            child: Image.network(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
              width: 100,
              height: 100,
            ),
            fit: BoxFit.contain,
            alignment: Alignment.topLeft,
            // clipBehavior: Clip.hardEdge,
          ),
        ));
  }
}

Align 对齐方式

屏幕坐标系,左上角为(0,0)右下角为(1,1)

在这里插入图片描述

import 'package:flutter/material.dart';

class Layout extends StatelessWidget {
  const Layout({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('Align 对齐方式'),
        ),
        body: Stack(
          children: [
            Align(
              // alignment: Alignment.topLeft,
              alignment: FractionalOffset(0,0),
              child:colorBlock(),
            ),
            Align(
              // alignment: Alignment.topRight,
              alignment: FractionalOffset(1,0),
              child:colorBlock(),
            ),
            Align(
              // alignment: Alignment.center,
              alignment: FractionalOffset(0.5,0.5),
              child:colorBlock(),
            ),
            Align(
              // alignment: Alignment.bottomLeft,
              alignment: FractionalOffset(0,1),
              child:colorBlock(),
            ),
            Align(
              // alignment: Alignment.bottomRight,
              alignment: FractionalOffset(1,1),
              child:colorBlock(),
            ),
          ],
        ));
  }
}

FractionallySizedBox 百分比布局

FractionallySizedBox 根据父组件的空间,按比例约束子控件,

  • 设置了对应的宽高比,则父组件必须有对应的宽度或高度设置,否则异常(比例因子大于1,对应的宽高超出父组件的范围),此时这是子组件的宽高没有效果
  • 不设置宽高比,子组件设置宽高,按子组件的宽高显示
  • 不设置宽高比,子组件不设宽高,子组件尽可能的填满父组件
import 'package:flutter/material.dart';

class Layout extends StatelessWidget {
 const Layout({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: new AppBar(
         title: Text('FractionallySizedBox'),
       ),
       body: Column(
         children: [
           Container(
               width: 100,
               height: 100,
               alignment: Alignment.topLeft,
               color: Colors.green,
               child: FractionallySizedBox(
                 alignment: Alignment.topLeft,
                 widthFactor: 0.5,
                 heightFactor: 1.5,
                 child: Container(color: Colors.red, height: 10, width: 50),
               ))
         ],
       ));
 }
}

AspectRatio 组件的宽高比例

如果子部件在查询每个约束后没有找到一个可行的大小,则子部件
将最终为子对象选择一个满足布局约束但不满足纵横比约束的大小。
代码中,需要在父组件中添加对齐方式:alignment,否则可能想要效果

在这里插入图片描述

import 'package:flutter/material.dart';

class Layout extends StatelessWidget {
  const Layout({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text('AspectRatio 宽高比 官方实例'),
        ),
        body: Column(
          children: [
            Text(
              "一个小部件,它尝试将子控件调整为特定的宽高比",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20, bottom: 10),
              child: Text(
                  '在宽度无穷的的情况下,子控件尝试以无穷的的宽根据宽高比,获取高度,如果高度超过父控件的高度,则按父控件的高度为约束,计算出子控件的宽度'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              width: double.infinity,
              height: 100.0,
              child: AspectRatio(
                aspectRatio: 16 / 9,
                child: Container(
                  color: Colors.green,
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20, bottom: 10),
              child: Text(
                  '子控件约束width在0~100之间,高度在0~100之间,我们选择最大的宽度100,得到高度50,在运行范围内'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              width: 100.0,
              height: 100.0,
              child: AspectRatio(
                aspectRatio: 2.0,
                child: Container(
                  width: 100.0,
                  height: 50.0,
                  color: Colors.green,
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20),
              child: Text(
                  '子控件选择最大高度100,根据比例计算高度200大于约束,所以取最大高度100,根据比例计算宽度50,满足要求'),
            ),
            Container(
              margin: EdgeInsets.only(top: 10),
              color: Colors.blue,
              alignment: Alignment.center,
              width: 100.0,
              height: 100.0,
              child: AspectRatio(
                aspectRatio: 0.5,
                child: Container(
                  width: 100.0,
                  height: 50.0,
                  color: Colors.green,
                ),
              ),
            )
          ],
        ));
  }
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习编程?其实不难,不过在学习编程之前你得先了解你的目的是什么?这个很重要,因为目的决定你的发展方向、决定你的发展速度。
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等,根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生学习Java开发,但要结合自身的情况,先了解自己适不适合去学习Java,不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研,多看、多想、多练
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服务器有时候会断掉,所以写个shell脚本每五分钟去判断是否连接,于是就有下面的shell脚本。
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
假如你已经使用过苹果开发者中心上架app,你肯定知道在苹果开发者中心的web界面,无法直接提交ipa文件,而是需要使用第三方工具,将ipa文件上传到构建版本,开...
下面的 SQL 语句指定了两个别名,一个是 name 列的别名,一个是 country 列的别名。**提示:**如果列名称包含空格,要求使用双引号或方括号:
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布。​
+----+--------------+---------------------------+-------+---------+
数组的声明并不是声明一个个单独的变量,比如 number0、number1、...、number99,而是声明一个数组变量,比如 numbers,然后使用 nu...
第一步:到appuploader官网下载辅助工具和iCloud驱动,使用前面创建的AppID登录。
如需删除表中的列,请使用下面的语法(请注意,某些数据库系统不允许这种在数据库表中删除列的方式):
前不久在制作win11pe,制作了一版,1.26GB,太大了,不满意,想再裁剪下,发现这次dism mount正常,commit或discard巨慢,以前都很快...
赛门铁克各个版本概览:https://knowledge.broadcom.com/external/article?legacyId=tech163829
实测Python 3.6.6用pip 21.3.1,再高就报错了,Python 3.10.7用pip 22.3.1是可以的
Broadcom Corporation (博通公司,股票代号AVGO)是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
发现个问题,server2016上安装了c4d这些版本,低版本的正常显示窗格,但红色圈出的高版本c4d打开后不显示窗格,
TAT:https://cloud.tencent.com/document/product/1340