Flutter基础控件及属性
Container
一个拥有绘制、定位、调整大小的 widget。
属性
alignment → AlignmentGeometry
将孩子与容器内的对齐。
child → Widget
容器所包含 的孩子。
constraints → BoxConstraints
适用于儿童的其他限制。
decoration → Decoration
孩子 背后的装饰。
foregroundDecoration → Decoration
在孩子面前涂漆的装饰。
margin → EdgeInsetsGeometry
空的空间环绕装饰和孩子。
padding → EdgeInsetsGeometry
在装饰里面刻的空的空间。如果有的话，将孩子放在这个衬垫内。
transform → Matrix4
在绘制容器之前应用的转换矩阵。
代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(20),
color: const Color(0xFF00FF00),
width: 200.0,
height: 200.0,
child: Text(
"123124",
style: TextStyle(color: Color(0xFFffFFff)),
textDirection: TextDirection.ltr,
),
),
);
}
}
Row
在水平方向上排列子widget的列表。
属性
children → List
树中此小部件下方的小部件。
crossAxisAlignment → CrossAxisAlignment
如何将孩子放在十字轴上。
direction → Axis
用作主轴的方向。
mainAxisAlignment → MainAxisAlignment
如何将孩子放在主轴上
mainAxisSize → MainAxisSize
主轴应占用多少空间。
textBaseline → TextBaseline
如果根据基线对齐项目，则使用哪个基线。
textDirection → TextDirection
确定为水平，以及如何解释奠定孩子出去 start，并end在水平方向上。
verticalDirection → VerticalDirection
确定垂直放置孩子以及如何解释start和end垂直方向的顺序 。
代码
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
color: Colors.red,
padding: EdgeInsets.all(5.0),
),
flex: 1,
),
Expanded(
child: Container(
color: Colors.yellow,
padding: EdgeInsets.all(5.0),
),
flex: 2,
),
Expanded(
child: Container(
color: Colors.blue,
padding: EdgeInsets.all(5.0),
),
flex: 1,
),
],
);
}
}
Column
在垂直方向上排列子widget的列表。
属性
children → List
树中此小部件下方的小部件。
crossAxisAlignment → CrossAxisAlignment
如何将孩子放在十字轴上。
direction → Axis
用作主轴的方向。
mainAxisAlignment → MainAxisAlignment
如何将孩子放在主轴上。
mainAxisSize → MainAxisSize
主轴应占用多少空间。
textBaseline → TextBaseline
如果根据基线对齐项目，则使用哪个基线。
textDirection → TextDirection
确定为水平，以及如何解释奠定孩子出去 start，并end在水平方向上。
verticalDirection → VerticalDirection
确定垂直放置孩子以及如何解释start和end垂直方向的顺序 。
代码
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Column(
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('We move under cover and we move as one',
style: TextStyle(height: 5), textDirection: TextDirection.ltr),
Text('Through the night, we have one shot to live another day',
style: TextStyle(height: 5), textDirection: TextDirection.ltr),
Text('We cannot let a stray gunshot give us away',
style: TextStyle(height: 5), textDirection: TextDirection.ltr),
Text('We will fight up close, seize the moment and stay in it',
style: TextStyle(height: 5), textDirection: TextDirection.ltr),
Text('It’s either that or meet the business end of a bayonet',
style: TextStyle(height: 5), textDirection: TextDirection.ltr),
Text('The code word is ‘Rochambeau,’ dig me?',
style: TextStyle(height: 5), textDirection: TextDirection.ltr),
Text('Rochambeau!',
style: TextStyle(height: 5), textDirection: TextDirection.ltr),
],
);
}
}
Image
一个显示图片的widget
- new Image, 用于从ImageProvider获取图像。
- new Image.asset,用于从AssetBundle获取图像。
1.在project下创建文件夹
2.把要使用的文件放到新创建的文件夹中
3.编辑pubspec.yaml文件
4.去掉 assets:前的注释
5.在asset:下一行注册图片资源
6. Image.asset('注册的文件名')
- new Image.network,用于从URL获取图像。
Image.network('https://flutter.io/images/homepage/header-illustration.png')
- new Image.file, 用于从文件中获取图像。
Image.file(File("/Users/gs/Downloads/1.jpeg")),
- new Image.memory, 用于从Uint8List获取图像
Image.memory(bytes)
属性
alignment → AlignmentGeometry
How to align the image within its bounds. [...]
final
centerSlice → Rect
九个补丁图像的中心切片。
color → Color
如果为非null，则使用colorBlendMode将此颜色与每个图像像素混合。
colorBlendMode → BlendMode
用于将颜色与此图像组合。
excludeFromSemantics → bool
是否从语义中排除此图像。
filterQuality → FilterQuality
用于设置图像的FilterQuality。
fit → BoxFit
如何将图像刻录到布局期间分配的空间中。
gaplessPlayback → bool
当图像提供者更改时，是继续显示旧图像（true）还是简单地显示任何内容（false）。
height → double
如果为非null，则要求图像具有此高度。
image → ImageProvider
要显示的图像。
matchTextDirection → bool
是否在TextDirection的方向上绘制图像。
repeat → ImageRepeat
如何绘制图像未覆盖的布局边界的任何部分。
semanticLabel → String
图像的语义描述。
width → double
如果为非null，则要求图像具有此宽度。
Text：
该 widget 可让创建一个带格式的文本。
属性
data → String
要显示的文字。
locale → 区域设置
用于在可以以不同方式呈现相同Unicode字符时选择字体，具体取决于区域设置。
maxLines → int
文本要跨越的可选最大行数，必要时包装。如果文本超过给定的行数，则会根据溢出将其截断。
overflow → TextOverflow
如何处理视觉溢出。
semanticsLabel → String
此文本的替代语义标签。
softWrap → 布尔
文本是否应该在软换行符处中断。
strutStyle → StrutStyle
要使用的支柱风格。Strut样式定义了strut，它设置了最小垂直布局度量。
style → TextStyle
如果为非null，则为此文本使用的样式。
textAlign → TextAlign
文本应如何水平对齐。
textDirection → TextDirection
文本的方向性。
textScaleFactor → double
每个逻辑像素的字体像素数。
textSpan → TextSpan
要显示为TextSpan的文本。
hashCode → int
此对象的哈希码。
只读，继承
键 → 键
控制一个小部件如何替换树中的另一个小部件。
runtimeType → 类型
表示对象的运行时类型。
只读，继承
代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Hello,! How are you?',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
//下面这行必须要有,否则会报报
textDirection: TextDirection.ltr),
);
}
}
Icon
A Material Design icon.
图标代码查询
属性
color → Color
绘制图标时使用的颜色。
icon → IconData
要显示的图标。可用图标中描述的图标。
semanticLabel → String
图标的语义标签。
size → double
逻辑像素中图标的大小。
textDirection → TextDirection
用于渲染图标的文本方向。
代码
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Icon(
IconData(60219, fontFamily: 'MaterialIcons'),
color: Color(0xFF00FF00),
textDirection: TextDirection.ltr,
);
}
}
RaisedButton
Material Design中的button， 一个凸起的材质矩形按钮
属性
animationDuration → Duration
定义形状和高程的动画更改的持续时间。
child → Widget
按钮的标签。
clipBehavior → Clip
根据此选项，内容将被剪裁（或不剪辑）。
color → Color
按钮的填充颜色，由其材料显示，同时处于默认（未按下，已启用）状态
colorBrightness → Brightness
用于此按钮的主题亮度。
disabledColor → Color
未启用按钮时 按钮的材质相对于其父级的高程。
disabledElevation → double
禁用按钮时用于此按钮文本的颜色。
disabledTextColor → Color
禁用按钮时用于此按钮文本的颜色。
elevation → double
将此按钮相对于其父级放置的z坐标。
enabled → bool
是启用还是禁用按钮。
height → double
按钮的垂直范围。
highlightColor → Color
按钮的InkWell的高亮颜色。
highlightElevation → double
启用并按下按钮时 按钮的材质相对于其父级的高程。
materialTapTargetSize → MaterialTapTargetSize
配置点击目标的最小尺寸。
minWidth → double
按钮占据的最小水平范围。
onHighlightChanged → ValueChanged
由底层InkWell小部件的InkWell.onHighlightChanged 回调调用。
onPressed → VoidCallback
点击或以其他方式激活按钮时调用的回调。
padding → EdgeInsetsGeometry
按钮的孩子的内部填充。
shape → ShapeBorder
按钮材质的形状。
splashColor → Color
按钮InkWell的闪烁颜色。
textColor → Color
用于此按钮文本的颜色。
textTheme → ButtonTextTheme
定义按钮的基色，以及按钮的最小尺寸，内部填充和形状的默认值。
代码
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Code Sample for material.Scaffold',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.green, Colors.blue],
),
),
padding: const EdgeInsets.all(10.0),
child: Text('Gradient Button'),
),
),
);
}
}
Scaffold
Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
属性
appBar → PreferredSizeWidget
一个应用栏，显示在脚手架的顶部。
backgroundColor → Color
作为整个脚手架基础的材质小部件的颜色。
body → Widget
支架的主要内容。
bottomNavigationBar → Widget
底部导航栏显示在脚手架的底部。
bottomSheet → Widget
要显示的持久性底部工作表。
drawer → Widget
显示在身体侧面的面板，通常隐藏在移动设备上。从左到右（TextDirection.ltr）或从右到左（TextDirection.rtl）。
drawerDragStartBehavior → DragStartBehavior
确定处理拖动开始行为的方式。
endDrawer → Widget
显示在身体侧面的面板，通常隐藏在移动设备上。从右到左（TextDirection.ltr）或从左到右（TextDirection.rtl）。
floatingActionButton → Widget
显示在身体上方的按钮，位于右下角。
floatingActionButtonAnimator → FloatingActionButtonAnimator
Animator将floatingActionButton移动到新的floatingActionButtonLocation。
floatingActionButtonLocation → FloatingActionButtonLocation
负责确定floatingActionButton的去向。
persistentFooterButtons → List
一组显示在脚手架底部的按钮。
primary → bool
此脚手架是否显示在屏幕顶部。
resizeToAvoidBottomInset → bool
如果为true，则body和scaffold的浮动窗口小部件应自行调整大小，以避免屏幕键盘的高度由环境MediaQuery的MediaQueryData.viewInsets bottom属性定义。
resizeToAvoidBottomPadding → bool
不推荐使用此标志，请改用resizeToAvoidBottomInset 。
@ Deprecated（'使用resizeToAvoidBottomInset指定在键盘出现时是否应调整主体的大小'）
代码
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Code Sample for material.Scaffold',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: Center(
child: Text('You have pressed the button'),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
)));
}
}
Appbar
一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。
属性
actions → List
要在标题小部件后显示的小部件。
automaticallyImplyLeading → bool
控制是否应该尝试暗示前导小部件为null。
backgroundColor → Color
用于应用栏材质的颜色。通常这应该与亮度，iconTheme，textTheme一起设置。
bottom → PreferredSizeWidget
此小部件显示在应用栏的底部。
bottomOpacity → double
应用栏底部的不透明程度。
brightness → Brightness
应用栏材质的亮度。通常，这与backgroundColor，iconTheme，textTheme一起设置。
centerTitle → bool
标题是否应该居中。
elevation → double
将此应用栏相对于其父级放置的z坐标。
flexibleSpace → Widget
此小组件堆叠在工具栏和标签栏后面。它的高度与应用栏的整体高度相同。
iconTheme → IconThemeData
用于应用栏图标的颜色，不透明度和大小。通常，这与backgroundColor，brightness，textTheme一起设置。
leading → Widget
要在标题之前显示的小部件。
preferredSize → Size
高度为kToolbarHeight和底部窗口小部件首选高度之和的大小。
primary → bool
此应用栏是否显示在屏幕顶部
textTheme → TextTheme
应用栏中用于文本的排版样式。通常，这与亮度 backgroundColor，iconTheme一起设置。
title → Widget
appbar中显示的主要小部件。
titleSpacing → double
横轴上标题内容 周围的间距。即使没有前导内容或操作，也会应用此间距。如果希望 title占用所有可用空间，请将此值设置为0.0。
toolbarOpacity → double
应用栏的工具栏部分是多么不透明。
代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// title: 'Flutter Code Sample for material.Scaffold',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AppBar(
title: Text('My Fancy Dress'),
actions: [
IconButton(
icon: Icon(Icons.playlist_play),
tooltip: 'Air it',
// onPressed: _airDress,
),
IconButton(
icon: Icon(Icons.playlist_add),
tooltip: 'Restitch it',
// onPressed: _restitchDress,
),
IconButton(
icon: Icon(Icons.playlist_add_check),
tooltip: 'Repair it',
// onPressed: _repairDress,
),
],
));
}
}
FlutterLogo
Flutter logo, 以widget形式. 这个widget遵从IconTheme。
用来展示Flutter的logo的
属性
colors → MaterialColor
用于绘制徽标的颜色样本，默认情况下为Colors.blue。
curve → Curve
如果样式，颜色或textColor 发生更改，则会生成徽标动画的曲线。
duration → Duration
如果更改样式，颜色或 textColor属性，则动画的时间长度。
size → double
逻辑像素中徽标的大小。
style → FlutterLogoStyle
是否以及在何处绘制“颤动”文本。默认情况下，仅绘制徽标本身。
textColor → Color
用于在徽标上绘制“Flutter”文本的颜色，如果样式为 FlutterLogoStyle.horizontal或FlutterLogoStyle.stacked。适当的颜色是const Color(0xFF616161)（中灰色），白色背景。
代码
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return FlutterLogo(
textColor: Color(0xFF616161),
duration: Duration(milliseconds: 750),
style: FlutterLogoStyle.markOnly,
);
}
}
Placeholder
一个绘制了一个盒子的的widget，代表日后有widget将会被添加到该盒子中
属性
color → Color
绘制占位符框的颜色。
fallbackHeight → double
占位符处于无限高度的情况下使用的高度。
fallbackWidth → double
占位符处于无限宽度的情况下使用的宽度。
strokeWidth → double
占位符框中行的宽度。
代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Placeholder(
fallbackWidth: 100.0,
fallbackHeight: 100.0,
color: Colors.orange,
);
}
}