使用Flutter也有一段時間,也寫過完整的項目整理下Flutter常用的組件

Scaffold

Scaffold(
// 基礎常用項
appBar:<AppBar>，//導航條
body:<Widget>吧史， //內容區(qū)
bottomNavigationBar:<Widget>，//底部導航菜單
bottomSheet:<Widget>，//底部工作表
backgroundColor:<Color>，//當前頁的背景顏色resizeToAvoidBottomInset:<boolean>，//是否調整自身大小primary:<boolean>瓤的，//是否顯示在屏幕頂部extendBody:<boolean>，//是否將主體將擴展到基架的底部extendBodyBehindAppBar:<boolean>吞歼，//是否將正文的頂部與應用欄的頂部對齊
// 浮動操作按鈕
floatingActionButton:<Widget>圈膏，//浮動操作按鈕floatingActionButtonLocation:<Location>，//浮動操作按鈕位置floatingActionButtonAnimator:<Animator>篙骡，//浮動操作按鈕動畫
// 在基架底部的按鈕組
persistentFooterButtons:<List<Widget>>稽坤，//組件列表persistentFooterAlignment:<AlignmentDirectional>，//對齊方式
// 左側抽屜菜單
drawer: <Widget>drawerEnable0penDragGesture:<boolean>糯俗，//是否可以通過拖動手勢打開onDrawerChanged:<Function>尿褪，//抽狀態(tài)改變時的回調
//右側抽屜菜單
endDrawer:<Widget>
endDrawerEnable0penDragGesture:<boolean>，//是否可以通過手勢打開onEndDrawerChanged:<Function>得湘，//抽狀態(tài)改變時的回調
//抽屜通用設置項
drawerDragStartBehavior:<Behavior>杖玲，//抽屜菜單拖動開始行為的處理方式drawerScrimColor:<Color>，//抽屜菜單打開時遮罩的顏色drawerEdgeDragWidth:<double>淘正，//抽菜單拖拽區(qū)域的寬度
// 重構標識 ID
restorationId: <String>)

AppBar

AppBar(
primary:<boolean>摆马，//是否是主要的
title:<widget>，//標題(默認靠近左側)
titleSpacing:<double>鸿吆，//標題的空隙
titleTextStyle:<TextStyle>
centerTitle:<boolean>囤采，//是否將標題居中顯示
leading:<Widget>,// Leading 組件
leadingWidth:<double>，// Leading 的寬度
toolbarOpacity:<double>惩淳，//導航條的透明度
toolbarHeight:<double>蕉毯，//導航條的高度
toolbarTextStyle:<TextStyle>，//除了 title 之外的文本樣式
automaticallyImplyLeading:<boolean>，//是否自動隱藏
Leadingactions:<List<Widget>>恕刘，//右側操作按鈕列表
flexibleSpace:<widget>缤谎，//填充剩余空間
bottom:<widget>，//用于填充導航欄底部的空間
bottomOpacity:<double>褐着，// 底部空間的透明度
shape:<ShapeBorder>坷澡，//導航條的形狀(可以改成圓角的)
excludeHeaderSemantics:<boolean>，//是否使用 Semantics 包裹標題
// 用于控制陰影
elevation:<double>含蓉，//景深(用于控制陰影的深度)
scrolledUnderElevation:<double>频敛，//滾動到導航條底部的距離
notificationPredicate=<Function>，// Body 滾動距離通知
shadowColor:<Color>馅扣，//陰影的顏色
// 主題色調等
surfaceTintColor:<Color>斟赚，//與背景疊加的顏色
backgroundColor:<Color>，//背景顏色
foregroundColor:<Color>差油，//前景顏色
iconTheme:<IconThemeData>拗军，//圖標主題
actionsIconTheme:<IconThemeData>，//右側操作按鈕主題
systemOverlayStyle:<SystemUi0verlayStyle>蓄喇，// 狀態(tài)欄的樣式
forceMaterialTransparency:<boolean>发侵，//強制使用 Material 樣式
//對于超出部分的處理
clipBehavior:<Clip>)

Container

Container(
width:<double>，// 寬度
height:<double>妆偏，// 高度
// 外間距margin:<EdgeInsets>
padding: <EdgeInsets>// 內間距
// 對齊方式alignment: <Alignment>,
child: <widget>,
/1 子節(jié)點
clipBehavior:<Clip>刃鳄，//如何處理超出部分
// 樣式設置color:<Color>，//背景顏色
decoration:<Decoration>钱骂，//樣式裝飾器
foregroundDecoration:<Decoration>叔锐，//前景裝飾器
// 布局約束
constraints:<BoxConstraints>,
// 位置變換
transform:<Matrix4>
transformAlignment: <Alignment>,
)

SizedBox

// 主要用于設定一塊區(qū)域的大小
SizedBox(
width:<double>， // 容器的寬
height:<double>见秽，// 容器的高
child:<Widget>愉烙， // 內容節(jié)點
)

Center

//相較于父容器進行居中顯示Center(
widthFactor:<double>， // 寬基于內容的倍數解取，默認為盡可能大
heightFactor:<double>齿梁，// 高基于內容的倍數，默認為盡可能大
child: <Widget>,// 內容節(jié)點
);

Row

Row(
mainAxisAlignment:<MainAxisAlignment>肮蛹，//主軸對齊方式
mainAxisSize:<MainAxisSize>勺择，// 主軸相對于父容器分配的空間
crossAxisAlignment:<CrossAxisAlignment>，//交叉軸的對其方式
textDirection:<TextDirection>伦忠，//文本布局方向
verticalDirection:<VerticalDirection>省核，//垂直布局子項的順序
textBaseline:<TextBaseline>，//文本對齊基線
children:<List<Widget>>昆码，//子控件
);

Column

Column(
mainAxisAlignment:<MainAxisAlignment>气忠，//主軸對齊方式
mainAxisSize:<MainAxisSize>邻储，//主軸相對于父容器分配的空間
crossAxisAlignment:<CrossAxisAlignment>，//交叉軸的對其方式
textDirection:<TextDirection>旧噪，//文本布局方向
verticalDirection:<VerticalDirection>吨娜，//垂直布局子項的順序
textBaseline:<TextBaseline>，//文本對齊基線
children:<List<Widget>>淘钟，// 子控件

Flexible

// 基礎彈性盒宦赠，可以更改子控件的分配占比;Flexible(
// 子控件占比flex: <int>
child:<Widget>，// 子控件
fit:<FlexFit>米母， // 對于子控件的填充方式
);
// 空白塊勾扭，用于撐開不需要的空白區(qū)域Spacer(flex: <int>);
// 將子控件強制填充滿剩余空間Expanded(// 子控件占比flex: <int>,child:<Widget>，//子控件
//此處是使用 Row 的布局來作演示,
// 如果是 Column 的話铁瞒，把下面圖旋轉 98°即可;

Wrap

Wrap(
direction:<Axis>妙色，//布局方式(水平或垂直)
alignment:<WrapAlignment>，//水平方向排列方式
runAlignment:<WrapAlignment>慧耍，//交叉軸方的對齊方式
crossAxisAlignment:<WrapCrossAlignment>身辨，//垂直方向排列方式
spacing:<double>，//水平間隙
runSpacing:<double>芍碧，//垂直間隙
textDirection:<TextDirection>煌珊，//水平布局子項的順序
verticalDirection:<VerticalDirection>，//垂直放置子對象的順序
clipBehavior:<Clip>师枣，//對于超出部分的處理方式
children:<List<Widget>>怪瓶，// 子控件

AspectRatio

// 用于約束子控件的寬高比,
// 具體的尺寸依賴于父元素的容器大小;
AspectRatio(
aspectRatio:<double>萧落，//寬高比践美，如:4/3，16/9;
child: <widget>,// 子控件
);

Stack

// 所有子控件以堆疊的形式顯示Stack(
alignment:<AlignmentDirectional>找岖，//子控件對齊方式
textDirection:<TextDirection>陨倡，//文本排列方向
fit:<StackFit>，// 子控件填充方式
clipBehavior:<Clip>许布，//對于超出部分的處理方式
children:<List<Widget>>兴革，//子控件

Positioned

Positioned(
left: <double>,// 距離左側的距離
top: <double>,// 距離頂部的距離
right:<double>， //距離右側的距離
bottom:<double>蜜唾，//距離底部的距離
width:<double>杂曲， //寬(如果同時具備 left/right 時可忽略)
height:<double>，//高(如果同時具備 top/bottom 時可忽略)
child:<widget>袁余， // 子控件

ListView

ListView(
scrollDirection:<Axis>擎勘，//滾動方向(水平或垂直)
reverse:<boolean>，//是否倒序渲染
controller:<Scro11Controller>颖榜，//滾動控制器
primary:<boolean>棚饵，//否是與父級關聯(lián)的主滾動視圖
physics:<ScrollPhysics>煤裙，//物理滾動效果
shrinkWrap:<boolean>，//滾動視圖的范圍是否應由正在查看的內容確定
padding:<EdgeInsets>噪漾，//整個列表的內間距
itemExtent:<double>硼砰，//子元素的高度
prototypeItem:<Widget>,//??
addAutomaticKeepAlives:<boolean>，//是否將子項包在 AutomaticKeepAlive 中addRepaintBoundaries:<boolean>欣硼，//是否添加重復的邊界
addSemanticIndexes:<boolean>题翰，//是否將子項包在 IndexedSemantics 中
cacheExtent:<double>，//緩存數據的可用范圍
children:<List<Widget>>分别，//列表項
semanticChildCount:<int>遍愿，//將提供語義信息的子項數
dragStartBehavior:<DragStartBehavior>，//拖動開始的行為
keyboardDismissBehavior:<dDismissBehavior>耘斩，//鍵盤關閉后的行為
restorationId:<String>沼填，//重繪ID
clipBehavior:<Clip>，//超出邊界的處理方式
)

GridView

GridView(
scrollDirection:<Axis>括授，//滾動方向(水平或垂直)
reverse:<boolean>坞笙，//是否倒序渲染
controller:<ScrollController>，//滾動控制器
primary:<boolean>荚虚，//否是與父級關聯(lián)的主滾動視圖
physics:<ScrollPhysics>薛夜，//物理滾動效果
shrinkWrap:<boolean>，//滾動視圖的范圍是否應由正在查看的內容確定
padding:<EdgeInsets>版述，//整個列表的內間距
gridDelegate:<GridDelegate>梯澜，//用于控制 GridView 中子項的布局
addAutomaticKeepAlives:<boolean>，//是否將子項包在 AutomaticKeepAlive 中addRepaintBoundaries:<boolean>渴析，//是否添加重復的邊界
addSemanticIndexes:<boolean>晚伙，//是否將子項包在 IndexedSemantics 中
cacheExtent:<double>，//緩存數據的可用范圍
children:<List<Widget>>俭茧，// 列表項
semanticChildCount:<int>咆疗，//將提供語義信息的子項數
dragStartBehavior:<DragStartBehavior>，//拖動開始的行為
keyboardDismissBehavior:<dDismissBehavior>母债，//鍵盤關閉后的行為
restorationId:<String>午磁，// 重繪ID
clipBehavior:<Clip>，//超出邊界的處理方式

Text

// 文本標簽
Text("文本標簽”毡们，style:<TextStyle>迅皇，//文本樣式
strutStyle:<StructStyle>，//嚴格的文本樣式
textAlign:<TextAlign>衙熔，// 文本對齊方式
textDirection:<TextDirection>登颓，//文字排列方向1
ocale:<Locale>，//指定顯示的國際化方言
overflow:<TextOverflow>青责，//文本溢出的話怎樣顯示
maxLines:<int>挺据，//最多顯示幾行
);
// 富文本
// 屬性也有很多取具，剩下的和 Text 差不多RichText(text:<InlineSpan>，//文本內容
// 文本輸入框
// 屬性太多了扁耐，知道是用于文本輸入就好了
TextField(...);

Icon

// 字體圖標
Icon(
<IconData>暇检，//字體 Icon 數據
size:<double>，// 大小尺寸
color:<Color>婉称，// 圖標顏色
shadows:<List<Shadow>>块仆，// 陰影
);
// 圖片類// 網絡圖片
Image.network(<String>);
// 本地圖片
Image.file(<String>),
Image.asset(<String>),
Image.memory(<Uint8List>);// 內存圖片
// 應用內圖片

0pacity

調整透明度的組件
0pacity(opacity:<double>，//子控件透明度// 子控件child: <widget>,

GestureDetector

//很重要的一個組件!
// Flutter 中沒有像JS中那樣在元素上綁定事件的機制,//Flutter 所有的對象皆為 widget王暗，所以處理事件也必須用//組件包裹起來悔据，包括其他的處理模式都大同小異。
GestureDetector(
child:<widget>俗壹，//用于處理事件的控件
onTapDown:<Function>,// 單擊觸發(fā)
onTapUp: <Function>,點擊抬起/1
// 執(zhí)行單擊
onTap:<Function>
onTapCancel:<Function>科汗，//單擊取消
// 雙擊觸發(fā)
onDoubleTapDown:<Function>，onDoubleTap:<Function>,
// 執(zhí)行雙擊
onDoubleTapCancel:<Function>绷雏，//雙擊取消
//長按觸發(fā)
onLongPressDown:<Function>onLongPressCancel:<Function>头滔，
//長按取消
onLongPress:<Function>
// 執(zhí)行長按
// 還有很多事件監(jiān)聽回調，這里就不-一羅列了涎显。```