分类标签归档:Flutter

Flutter UnconstrainedBox


简介

跟ConstrainedBox相反,是不添加任何约束条件到child上,让child按照其原始的尺寸渲染

  • 它的作用就是给child一个尽可能大的空间,不加约束的让其显示。
  • 如果该widget不能扩展到到足够容纳整个child的空间,child将被裁剪

基本用法

  • alignment 属性:控制child对齐方式
  • textDirection 属性:控制文本对齐
  • constrainedAxis 属性:如果有,就使用

实例演示

import 'package:flutter/material.dart';

class UnconstrainedBoxDemo e...

阅读全文...

Flutter SizedBox


实例演示

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class SizeBoxDefault extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 140.0,
      height: 80.0,
      child: const Card(
        chil...

阅读全文...

Flutter SizedOverflowBox


简介

一个特定大小的窗口小部件,将其原始约束传递给其子节点,可能会溢出。

基本用法

alignment:对齐

size: 设置部件大小

  • ex:为方便看效果,现设置幕布大小为(Container)200*50。图一

  • ex:图一,基础上添加一个不设置size属性的SizeOverflowBox。图二

  • ex:图二,添加size属性,100*20,图三

  • ex:图三,添加 alignment: Alignment.center,

实例演示

import 'package:flutter/material.dart';
import 'package:flutte...

阅读全文...

Flutter RotatedBox


简介

可以将子widget旋转整数的四分之一

  • 和Transform不同,该对象在布局之前应用其旋转,整个旋转的范围仅消耗旋转的子widget所需要的空间

基本用法

旋转widget

  • 通过quarterTurns,设置child的顺时针四分之一的转数
  • ex:quarterTurns=3/8

实例演示

import 'package:flutter/material.dart';

class RotatedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {...

阅读全文...

Flutter OverflowBox


OverflowBox简介

它对child施加的约束不同于从其父控件获得的约束,可能允许child溢出父控件的空间.

  • 当OverflowBox的最大尺寸大于child的时候,child可以完整显示,当其小于child的时候,则以最大尺寸为基准,当然,这个尺寸都是可以突破父节点的

基本用法

OverflowBox设置最大/最小尺寸

  • SizedOverflowBox,一个特定大小的小部件,但将其原始约束传递给它的子节点,然后可能会溢出。
  • ConstrainedBox,一个对其子项施加额外约束的小部件。
  • UnconstrainedBox,一个试图让它的child在没有约束的情况下绘制的容...

阅读全文...

Flutter LimitedBox


简介

对最大宽高进行限制的控件(前提是LimitedBox不受约束)

  • 即:将child限制在指定的最大宽高中
  • 这就使得child自身没有约束大小的时候具有了外部约束,依然控制了其大小
  • 例如:通过给LimitedBox最大高度(maxHeight),widget通常会调整其自身的大小去适应父窗体,但是,当放置在竖直(cloumn)列表中时,它将采用给定的高度

基本用法

widget 限制child最大宽高,如下:

  • 如果LimitedBox外部宽度没有被约束,child的宽受到LimitedBox最大宽度(maxWidth)属性限制
  • 同理,LimitedBox外部高度没有约束,chil...

阅读全文...

Flutter FittedBox


FittedBox

根据自己的需要,对child进行缩放和定位

  • 可以看看变换,在绘制时任意变换应用在子窗口的widget

基本用法

根据外部约束,调整child

  • 如果外部没有约束,按照child的大小。
  • 如果外部有约束,按照外部约束调整自身大小,然后缩放调整child,根据条件进行放置
  • BoxFix 属性,可修改child写入布局时期分配的空间
  • alignment修改child于父空间对齐方式,默认:Alignment.center

实例源码

import 'package:flutter/material.dart';
import 'package:f...

阅读全文...

Flutter DecoratedBox


简介

在child绘制前或绘制后,添加额外的限制条件到child上的widget

  • 根据边界的宽高,对其child进行插入绘制

基本用法

decoration → Decoration

  • 常用于BoxDecoration
  • BoxDecoration提供多种方式来绘制以一个框
  • 盒子形状可以是圆形也可以是矩形,用borderRadius属性来绘制角度

position → DecorationPosition

  • position: DecorationPosition.foreground,

实例演示

class DecoratedBoxCreate extends Stateless...

阅读全文...

Flutter ConstrainedBox


简介

添加额外的限制条件到child上

  • 比如说,你限制child最小高度为50.0像素,就可以用constraints: const BoxConstraints(minHeight:50)

基本用法

添加额外的限制条件到child上

  • ex:添加ConstrainedBox约束如下,传入不同Width约束的Container效果
minWidth: 100.0,
minHeight: 20.0,
maxWidth: 300.0,
maxHeight: 50.0

实例演示

class ConstrainedBoxCreate extends StatelessWidget {
 ...

阅读全文...

Flutter Align


简介

Align控件即对齐控件,能将子控件所指定方式对齐,并根据子控件的大小调整自己的大小。根据自己需求,进行控件对齐

基本用法

alignment → AlignmentGeometry

  • 要对齐右下方的框,那么对这个框对要求会比对子控件更加严肃的约束,使用:Alignment.bottomRight
  • 同理:Alignment.center,Alignment.bottomLeft,Alignment.topLeft等

widthFactor / heightFactor → double

  • 如果widthFactor / heightFactor 为空,并且外部无任何约束,chil...

阅读全文...