Flutter基础widgets教程-OverflowBox篇
时间:2022-07-27
本文章向大家介绍Flutter基础widgets教程-OverflowBox篇,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 OverflowBox
对其子项施加不同约束的widget,它可能允许子项溢出父级
2 构造函数
OverflowBox({
Key key,
this.alignment = Alignment.center,
this.minWidth,
this.maxWidth,
this.minHeight,
this.maxHeight,
Widget child,
})
3 常用属性
3.1 alignment:对齐方式
alignment:Alignment.center,
3.1.1 顶部左边
alignment:Alignment.topLeft,
3.1.2 顶部中间
alignment:Alignment.topCenter,
3.1.3 顶部右边
alignment:Alignment.topRight,
3.1.4 中部左边
alignment:Alignment.centerLeft,
3.1.5 中部中间
alignment:Alignment.center,
3.1.6 中部右边
alignment:Alignment.centerRight,
3.1.7 底部左边
alignment:Alignment.bottomLeft,
3.1.8 底部中间
alignment:Alignment.bottomCenter,
3.1.9 底部右边
alignment:Alignment.bottomRight,
3.2 minWidth:允许child的最小宽度,如果child宽度小于这个值,则按照最小宽度进行显示
minWidth: 200.0,
3.3 maxWidth:允许child的最大宽度,如果child宽度大于这个值,则按照最大宽度进行展示
maxWidth: 200.0,
3.4 minHeight:允许child的最小高度,如果child高度小于这个值,则按照最小高度进行显示
minHeight: 200.0,
3.5 maxHeight:允许child的最大高度,如果child高度大于这个值,则按照最大高度进行展示
maxHeight: 200.0,
3.6 child:子widget
child: Text('你好 Flutter'),
4 显示效果
5 widget代码
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
// 字体适配
import '../../utils/app_size.dart';
class ListOverflowBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('OverflowBox'),
backgroundColor: Color(0xFFfafcff),
bottom: TabBar(labelColor: Color(0xff030303), tabs: [
Tab(
text: "效果",
),
Tab(
text: "属性",
)
]),
),
body: TabBarView(children: [
Container(
decoration: new BoxDecoration(
color: new Color(0xffffffff),
borderRadius: new BorderRadius.circular((AppSize.width(20))),
),
child: ShowEffect()),
Container(
decoration: new BoxDecoration(
color: new Color(0xffffffff),
borderRadius: new BorderRadius.circular((AppSize.width(20))),
),
child: ShowAttribute()),
]),
),
);
}
}
// 效果
class ShowEffect extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("WidgetsApp Demo"),
),
body: Container(
//1 注意:父容器的宽高是200 减去pading后是180
padding: EdgeInsets.all(10),
color: Colors.green,
width: 200,
height: 200,
child: new OverflowBox(
maxHeight: 400, //2 不能小于父容器的高度180
child: new Container(
color: Colors.deepOrange,
width: 200,
height: 600,
),
),
),
),
);
}
}
// 属性
class ShowAttribute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: rootBundle.loadString('lib/markdown/overflowBox.md'),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Markdown(
data: snapshot.data,
selectable: true,
);
} else {
return Center(
child: Text("加载中..."),
);
}
},
),
);
}
}
此代码已共享到码云,已对60多种widget做演示及解释。
- [WCF安全系列]消息的保护等级[上篇]
- QEMU 1: 使用QEMU创建虚拟机
- [WCF安全系列]绑定、安全模式与客户端凭证类型:NetNamedPipeBinding、NetTcpBinding与NetMsmqBinding
- 操作系统级虚拟化概述
- 让javascript中的异步请求同步起来
- [WCF REST] WebHttpBinding与消息编码
- React 概要
- [WCF REST] UriTemplate、UriTemplateTable与WebHttpDispatchOperationSelector
- [WCF REST] WebServiceHost有何特别之处?
- OSX SIP机制的“那些事”
- [WCF REST] 帮助页面与自动消息格式(JSON/XML)选择
- WCF服务端运行时架构体系详解[下篇]
- python和C语言混编的几种方式
- 通过“四大行为”对WCF的扩展[实例篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 控制ScrollView滚动的实例详解
- Android 判断是否能真正上网的实例详解
- Android UI设计与开发之PopupWindow仿腾讯新闻底部弹出菜单
- android实现微信联合登录开发示例
- 详解Android WebView加载html片段
- Ubuntu 20.04最佳配置指南(新手必备)
- ScrollView与SeekBar绑定实现滑动时出现小滑块效果
- Android用StaticLayout实现文字转化为图片效果(类似长微博发送)
- Android中Dialog自定义上下文花式菜单
- Android ListView与getView调用卡顿问题解决办法
- Android四种数据存储的应用方式
- ViewDragHelper实现QQ侧滑效果
- Android实现双击TitleBar回顶部的功能示例代码
- windows10 更新Ubuntu20.04 LTS的方法步骤
- Android 中解决Viewpage调用notifyDataSetChanged()时界面无刷新的问题