Flutter - Card class

Flutter 的 Card class 提供類似卡片的效果,該元件的四個角落為圓角,並具備有陰影的效果。


其建構子如下:

Card({Key key, Color color, double elevation: 2.0, Widget child })


屬性如下:

Name Type Description
child Widget The widget below this widget in the tree.
color Color The color of material used for this card.
elevation double The z-coordinate at which to place this card. This controls the size of the shadow below the card.
hashCode int The hash code for this object.
key Key Controls how one widget replaces another widget in the tree.
runtimeType Type A representation of the runtime type of the object.


方法如下:

Name Return Type Description
build(BuildContext context) Widget Describes the part of the user interface represented by this widget.
createElement() StatelessElement Creates a StatelessElement to manage this widget’s location in the tree.
debugDescribeChildren() List Returns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(DiagnosticPropertiesBuilder properties) void Add additional properties associated with the node.
noSuchMethod(Invocation invocation) dynamic Invoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode Returns a debug representation of the object that is used by debugging tools and by toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a string representation of this object.
toStringDeep({String prefixLineOne: ‘’, String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a string representation of this node and its descendants.
toStringShallow({String joiner: ‘, ‘, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String Returns a one-line detailed description of the object.
toStringShort() String A short, textual description of this widget.


Card 元件需在 MaterialApp 下使用,使用上可透過 child 屬性指定內部的元件,color 屬性指定 color 元件的顏色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import 'package:flutter/material.dart';

void main()
{
runApp
(
new MaterialApp
(
home: new Container
(
color: Colors.white,
child: new Center
(
child: new Container(
width: 200.0,
height: 200.0,
child: new Card(
child: const Text('Hello World'),
color: Colors.yellow,
)
)
)
)
)
);
}