長按拖拽組件 - LongPressDraggable
設(shè)置拖拽手勢響應(yīng)時間屬性 delay
/// The duration that a user has to press down before a long press is registered.
///
/// Defaults to [kLongPressTimeout].
/// const Duration kLongPressTimeout = Duration(milliseconds: 500);
final Duration delay;
系統(tǒng)介紹 delay 控制長按響應(yīng)時間，默認為kLongPressTimeout 500毫秒彰居。默認時間有點長牧抽，長按顯得不靈敏。通過修改delay后拖拽體驗更流暢
LongPressDraggable(
child: Container(),
feedback: Container(),
delay: Duration(milliseconds: 100), // 設(shè)置長按響應(yīng)時間為100毫秒
);
固定寬高比的組件 - AspectRatio
AspectRatio組件是固定寬高比的組件夏块，如果組件的寬度固定疏咐，希望高是寬的1/2纤掸，可以用AspectRatio實現(xiàn)此效果，用法如下
AspectRatio(
aspectRatio: 2 / 1 ,
child: Container(color: Colors.black),
)
aspectRatio參數(shù)是寬高比浑塞，可以直接寫成分數(shù)的形式借跪，也可以寫成小數(shù)的形式，但建議寫成分數(shù)的形式酌壕，可讀性更高
尺寸相對父組件尺寸比例組件 - FractionallySizedBox
當(dāng)我們需要一個控件的尺寸是相對尺寸時掏愁，比如當(dāng)前按鈕的寬度占父組件的50%，可以使用FractionallySizedBox來實現(xiàn)此效果卵牍。
使用FractionallySizedBox包裹子控件果港，設(shè)置widthFactor寬度系數(shù)或者heightFactor高度系數(shù)，系數(shù)值的范圍是0-1糊昙，0.5表示占父組件的50%辛掠，用法如下：
FractionallySizedBox(
widthFactor: .5,
child: Container(color: Colors.red),
)
約束子組件的最大寬高和最小寬高 - ConstrainedBox
ConstrainedBox組件 子組件的最大寬高和最小寬高，假如一個組件寬高都是300溅蛉，包裹在ConstrainedBox中公浪，并給ConstrainedBox添加最大寬高約束，用法如下：
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
child: Container(height: 300, width: 300, color: Colors.yellow),
);
其中Container 也有constraints 屬性船侧，控制最大欠气、小 寬高
Container(
constraints: BoxConstraints(
maxWidth: 100,
minWidth: 50,
maxHeight: 100,
minHeight: 100,
),
child: Text('123'),
);
指定順序stack布局組件 - IndexedStack
IndexedStack是Stack的子類，Stack是將所有的子組件疊加顯示镜撩，而IndexedStack只顯示指定的子組件预柒，用法如下：
IndexedStack(
index: _index,
children: [
Center(
child: Container(
height: 300,
width: 300,
color: Colors.yellow,
),
),
Center(
child: Container(
height: 300,
width: 300,
color: Colors.red,
),
),
Center(
child: Container(
height: 300,
width: 300,
color: Colors.blueGrey,
),
),
],
);
通過修改_index 來改變顯示哪個UI組件
LayoutBuilder組件
通過 LayoutBuilder，我們可以在布局過程中拿到父組件傳遞的約束信息袁梗，然后我們可以根據(jù)約束信息動態(tài)的構(gòu)建不同的布局宜鸯。
比如我們實現(xiàn)一個響應(yīng)式的組件 ResponsiveColumn，它的功能是當(dāng)當(dāng)前可用的寬度小于 200 時遮怜，將子組件顯示為一列淋袖，否則顯示為兩列。簡單來實現(xiàn)一下：
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth < 200) {
// 最大寬度小于200锯梁，顯示單列
return Column(children: children, mainAxisSize: MainAxisSize.min);
} else {
// 大于200即碗，顯示雙列
var _children = <Widget>[];
for (var i = 0; i < children.length; i += 2) {
if (i + 1 < children.length) {
_children.add(Row(
children: [children[i], children[i + 1]],
mainAxisSize: MainAxisSize.min,
));
} else {
_children.add(children[i]);
}
}
return Column(children: _children, mainAxisSize: MainAxisSize.min);
}
},
)
