Skip to content

F
Flutter_app
提交 8a1167f6 作者: 杨俊磊
操作

容器类组件 填充Padding、尺寸限制类容器、装饰容器、变换

上级 150f30ce bee6495d
正在显示 包含 264 行增加 和 61 行删除
doc/dingbaojie/20200313Flutter容器类组件学习（1）/填充、尺寸限制类容器、装饰容器、变换 0 → 100644
填充要点记录:
填充要点记录:
EdgeInsets
我们看看EdgeInsets提供的便捷方法：
fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
all(double value) : 所有方向均使用相同数值的填充。
only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
尺寸限制类容器
尺寸限制类容器用于限制容器大小，Flutter中提供了多种这样的容器，如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio等，本节将介绍一些常用的。
1. ConstrainedBox
ConstrainedBox用于对子组件添加额外的约束。例如，如果你想让子组件的最小高度是80像素，你可以使用const BoxConstraints(minHeight: 80.0)作为子组件的约束。
2. SizedBox
SizedBox用于给子元素指定固定的宽高
3. 多重限制
当有多重限制时，对于minWidth和minHeight来说，是取父子中相应数值较大的。因为只有这样才能保证父限制与子限制不冲突。
4. UnconstrainedBox
UnconstrainedBox不会对子组件产生任何限制，它允许其子组件按照其本身大小绘制。一般情况下，我们会很少直接使用此组件，但在"去除"多重限制的时候也许会有帮助
UnconstrainedBox对父组件限制的“去除”并非是真正的去除：上面例子中虽然红色区域大小是90×20，但上方仍然有80的空白空间。也就是说父限制的minHeight(100.0)仍然是生效的，
只不过它不影响最终子元素redBox的大小，但仍然还是占有相应的空间，可以认为此时的父ConstrainedBox是作用于子UnconstrainedBox上，而redBox只受子ConstrainedBox限制
如果要对子组件指定限制，那么一定要注意，因为一旦指定限制条件，子组件如果要进行相关自定义大小时将可能非常困难，因为子组件在不更改父组件的代码的情况下无法彻底去除其限制条件。
在实际开发中，当我们发现已经使用SizedBox或ConstrainedBox给子元素指定了宽高，但是仍然没有效果时，几乎可以断定：已经有父元素已经设置了限制！
5. 其它尺寸限制类容器
除了上面介绍的这些常用的尺寸限制类容器外，还有一些其他的尺寸限制类容器，
比如AspectRatio，它可以指定子组件的长宽比、LimitedBox 用于指定最大宽高、FractionallySizedBox 可以根据父容器宽高的百分比来设置子组件宽高
装饰容器DecoratedBox
DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等
doc/jiexifeng/20200313填充、尺寸限制类容器、装饰容器、变换.doc 0 → 100644
++ "b/doc/jiexifeng/20200313\345\241\253\345\205\205\343\200\201\345\260\272\345\257\270\351\231\220\345\210\266\347\261\273\345\256\271\345\231\250\343\200\201\350\243\205\351\245\260\345\256\271\345\231\250\343\200\201\345\217\230\346\215\242.doc"
lib/dingbaojie/FirstDay/DecoratedBoxDemo.dart 0 → 100644
import 'package:flutter/material.dart';
import 'SizelimitedDemo.dart';
class DecoratedBoxDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("装饰容器"), automaticallyImplyLeading: false),
body: Center(
child: Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)"),
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 40.0,top: 10.0,bottom: 30),
child: Text("EdgeInsets.only"),
),
Text("symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right"),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 30.0),
child: Text(" EdgeInsets.symmetric"),
),
Text("fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,20.0),
child: Text("EdgeInsets.fromLTRB"),
),
Text("all(double value) : 所有方向均使用相同数值的填充。"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.all(30),
child: Text("EdgeInsets.all"),
),
RaisedButton(
child: Text("带参跳转页面"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SizelimitedDemo()),
);
},
),
],
),
)
),
);
}
}
\ No newline at end of file
lib/dingbaojie/FirstDay/PaddingDemo.dart 0 → 100644
import 'package:flutter/material.dart';
import 'SizelimitedDemo.dart';
class PaddingDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("填充（Padding)"), automaticallyImplyLeading: false),
body: Center(
child: Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)"),
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 40.0,top: 10.0,bottom: 30),
child: Text("EdgeInsets.only"),
),
Text("symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right"),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 30.0),
child: Text(" EdgeInsets.symmetric"),
),
Text("fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,20.0),
child: Text("EdgeInsets.fromLTRB"),
),
Text("all(double value) : 所有方向均使用相同数值的填充。"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.all(30),
child: Text("EdgeInsets.all"),
),
RaisedButton(
child: Text("带参跳转页面"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SizelimitedDemo()),
);
},
),
],
),
)
),
);
}
}
\ No newline at end of file
lib/dingbaojie/FirstDay/SizelimitedDemo.dart 0 → 100644
import 'package:flutter/material.dart';
class SizelimitedDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("尺寸限制类容器"), automaticallyImplyLeading: false),
body: Column(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
minWidth: double.infinity, //宽度尽可能大
minHeight: 50.0 //最小高度为50像素
),
child: Container(
height: 50.0,
child: ConstrainedBoxs,
),
),
Container(
margin: EdgeInsets.only(top: 20.0),
child: SizedBox(
width: 80.0,
height: 80.0,
child: sizeBoxs
),
),
Container(
margin: EdgeInsets.only(top: 20.0),
child:ConstrainedBox(
constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
child: UnconstrainedBox( //“去除”父级限制
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子
child: UnconstrainedBoxs,
),
)
),
)
],
)
);
}
Widget ConstrainedBoxs=DecoratedBox(
child: Center(
child: Text("ConstrainedBox",),
),
decoration: BoxDecoration(color: Colors.red),
);
Widget sizeBoxs=DecoratedBox(
child: Center(
child: Text("sizeBox",),
),
decoration: BoxDecoration(color: Colors.blue),
);
Widget UnconstrainedBoxs=DecoratedBox(
child: Text("UnconstrainedBox",textAlign: TextAlign.center,),
decoration: BoxDecoration(color: Colors.blue),
);
}
\ No newline at end of file
lib/dingbaojie/dingbaojie.dart deleted 100644 → 0
import 'package:flutter/material.dart';
class dingbaojie extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Center(
child: new Container(
child: Text(
'丁保杰',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 30,
decoration:TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.double
),
),
width: 300,
height: 300,
alignment: Alignment.center,// 让内部居中显示
decoration: BoxDecoration(
color: Colors.red,
),
),
);
}
}
\ No newline at end of file
lib/jiexifeng/jiexifeng.dart
......@@ -9,7 +9,7 @@ class jiexifeng extends StatelessWidget{
return new Center(
child: new Container(
child: Text(
'介西风',
'介西锋',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
......
lib/main.dart
......@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutterpro/router_path.dart';
import 'package:flutterpro/yangjunlei/yangjunlei.dart';
import 'dingbaojie/dingbaojie.dart';
import 'dingbaojie/FirstDay/PaddingDemo.dart';
import 'jiexifeng/jiexifeng.dart';
import 'liangjialin/liangjialin.dart';
......@@ -42,7 +42,7 @@ class MyAppBody extends StatelessWidget {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => dingbaojie(),
builder: (context) => PaddingDemo(),
));
},
child: Text("丁保杰"),
......
lib/router_path.dart
......@@ -2,7 +2,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterpro/yangjunlei/yangjunlei.dart';
import 'dingbaojie/dingbaojie.dart';
import 'dingbaojie/FirstDay/PaddingDemo.dart';
import 'jiexifeng/jiexifeng.dart';
import 'liangjialin/liangjialin.dart';
......@@ -16,7 +16,7 @@ class RouterName {
class Router {
static Map<String, WidgetBuilder> generateRoute() {
Map<String, WidgetBuilder> routes = {
RouterName.dingbaojie: (context) => new dingbaojie(),
RouterName.dingbaojie: (context) => new PaddingDemo(),
RouterName.jiexifeng: (context) => new jiexifeng(),
RouterName.yangjunlei: (context) => new YangJunLei(),
RouterName.liangjialin: (context) => new liangjialin(),
......
pubspec.lock
......@@ -5,63 +5,63 @@ packages:
dependency: transitive
description:
name: archive
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.11"
args:
dependency: transitive
description:
name: args
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.5.2"
async:
dependency: transitive
description:
name: async
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.4.0"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.0.5"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.14.11"
convert:
dependency: transitive
description:
name: convert
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.1.1"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.1.3"
cupertino_icons:
dependency: "direct main"
description:
name: cupertino_icons
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.1.3"
flutter:
......@@ -78,49 +78,49 @@ packages:
dependency: transitive
description:
name: image
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.1.4"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.12.6"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.8"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.6.4"
pedantic:
dependency: transitive
description:
name: pedantic
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.8.0+1"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.4.0"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.5"
sky_engine:
......@@ -132,63 +132,63 @@ packages:
dependency: transitive
description:
name: source_span
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.5.5"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.0.5"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.2.11"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.6"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.8"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.dartlang.org"
url: "https://pub.flutter-io.cn"
source: hosted
version: "3.5.0"
sdks:
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论