Flutter 的 Placeholder widget 主要用來標示後續會被其它 Widget 取代的地方。

其建構子如下:

Placeholder({Key key, Color color: const Color(0xFF455A64), double strokeWidth: 2.0, double fallbackWidth: 400.0, double fallbackHeight: 400.0 })

屬性如下:

NameTypeDescription
colorColorThe color to draw the placeholder box.
fallbackHeightdoubleThe height to use when the placeholder is in a situation with an unbounded height.
fallbackWidthdoubleThe width to use when the placeholder is in a situation with an unbounded width.
strokeWidthdoubleThe width of the lines in the placeholder box.
hashCodeintThe hash code for this object.
keyKeyControls how one widget replaces another widget in the tree.
runtimeTypeTypeA representation of the runtime type of the object.

方法如下:

NameReturn TypeDescription
build(BuildContext context)WidgetDescribes the part of the user interface represented by this widget.
createElement()StatelessElementCreates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren()ListReturns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(DiagnosticPropertiesBuilder description)voidAdd additional properties associated with the node.
noSuchMethod(Invocation invocation)dynamicInvoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style })DiagnosticsNodeReturns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug })StringReturns a one-line detailed description of the object.
toStringShort()StringA short, textual description of this widget.

該 Widget 可以不帶參數直接使用。

import 'package:flutter/material.dart';

void main() {
runApp(new Placeholder());
}

1.png

2.png

若有需要也可以透過 color 屬性變更顏色。

import 'package:flutter/material.dart';

void main() {
runApp(new Placeholder(
color: Colors.green,
));
}

3.png

4.png

或是透過 strakeWidth 變更線條的寬度。

import 'package:flutter/material.dart';

void main() {
runApp(new Placeholder(
strokeWidth: 10.0,
));
}

5.png

6.png