Flutter Widget

Flutter 中通过 Widget 嵌套 Widget 的方式来构建 UI，在Flutter 中万物皆为Widget，类似 iOS 中的UIView 控件。

Container

Container({
  Key? key,
  this.alignment,
  this.padding,
  this.color,
  this.decoration,
  this.foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  this.margin,
  this.transform,
  this.transformAlignment,
  this.child,
  this.clipBehavior = Clip.none,
})

Text

const Text(
  String this.data, {
  Key? key,
  this.style,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaleFactor,
  this.maxLines,
  this.semanticsLabel,
  this.textWidthBasis,
  this.textHeightBehavior,
})

Image

const Image({
  Key? key,
  required this.image,
  this.frameBuilder,
  this.loadingBuilder,
  this.errorBuilder,
  this.semanticLabel,
  this.excludeFromSemantics = false,
  this.width,
  this.height,
  this.color,
  this.opacity,
  this.colorBlendMode,
  this.fit,
  this.alignment = Alignment.center,
  this.repeat = ImageRepeat.noRepeat,
  this.centerSlice,
  this.matchTextDirection = false,
  this.gaplessPlayback = false,
  this.isAntiAlias = false,
  this.filterQuality = FilterQuality.low,
})

Row

Row({
  Key? key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
  List<Widget> children = const <Widget>[],
})

Column

Column({
  Key? key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
  List<Widget> children = const <Widget>[],
})

在Row中使用Expanded的时候，无法指定Expanded中的子组件的宽度，但可以指定其高度。同理，在Column中使用Expanded的时候，无法指定Expanded中的子组件的高度，但可以指定其宽度。

AppBar

AppBar({
  Key? key,
  this.leading,
  this.automaticallyImplyLeading = true,
  this.title,
  this.actions,
  this.flexibleSpace,
  this.bottom,
  this.elevation,
  this.shadowColor,
  this.shape,
  this.backgroundColor,
  this.foregroundColor,
  this.iconTheme,
  this.actionsIconTheme,
  this.primary = true,
  this.centerTitle,
  this.excludeHeaderSemantics = false,
  this.titleSpacing,
  this.toolbarOpacity = 1.0,
  this.bottomOpacity = 1.0,
  this.toolbarHeight,
  this.leadingWidth,
  this.toolbarTextStyle,
  this.titleTextStyle,
  this.systemOverlayStyle,
})

Scaffold

const Scaffold({
  Key? key,
  this.appBar,
  this.body,
  this.floatingActionButton,
  this.floatingActionButtonLocation,
  this.floatingActionButtonAnimator,
  this.persistentFooterButtons,
  this.drawer,
  this.onDrawerChanged,
  this.endDrawer,
  this.onEndDrawerChanged,
  this.bottomNavigationBar,
  this.bottomSheet,
  this.backgroundColor,
  this.resizeToAvoidBottomInset,
  this.primary = true,
  this.drawerDragStartBehavior = DragStartBehavior.start,
  this.extendBody = false,
  this.extendBodyBehindAppBar = false,
  this.drawerScrimColor,
  this.drawerEdgeDragWidth,
  this.drawerEnableOpenDragGesture = true,
  this.endDrawerEnableOpenDragGesture = true,
  this.restorationId,
})

Stack

Stack({
  Key? key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.clipBehavior = Clip.hardEdge,
  List<Widget> children = const <Widget>[],
})