一藕甩、Text 組件外圍包裹了 GestureDetector 手勢(shì)組件點(diǎn)擊的時(shí)候響應(yīng)范圍太小
解決方式：
- Text 外圍使用 TextButton 包裹
- 使用 InkWell 組件包裹
二富拗、List 的使用
在數(shù)據(jù)量比較小的時(shí)候比如固定布局，可以使用 List.generate() 次企，來(lái)循環(huán)渲染脯颜。
ListView.builder 適用于列表長(zhǎng)度比較多虽画，比如存在分頁(yè)數(shù)據(jù)舞蔽，
ListView.builder 外部如果有其他組件需要一起滾動(dòng)，則需要 禁用內(nèi)部的滾動(dòng)事件
physics: NeverScrollableScrollPhysics(),
還有可能出現(xiàn)額外的高度間距码撰，需要用 MediaQuery.removePadding
MediaQuery.removePadding(
removeTop: true,
removeBottom: true,
context: context,
child: ListView.builder(
itemCount: 4,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (c, i) {
return ForumItem();
}),
),
去除內(nèi)部高度渗柿。
三、showModalBottomSheet 高度限制，圓角問(wèn)題
解決方案：將整個(gè)文件拷貝進(jìn)項(xiàng)目朵栖。（建議重新命名颊亮，這樣導(dǎo)包的時(shí)候方便識(shí)別）
修改maxHeight，注釋掉即可
@override
BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
minWidth: constraints.maxWidth,
maxWidth: constraints.maxWidth,
minHeight: 0.0,
// maxHeight: isScrollControlled
// ? constraints.maxHeight
// : constraints.maxHeight,
);
}
圓角可通過(guò) shape: RoundedRectangleBorder( borderRadius: BorderRadius.only(topRight: Radius.circular(12.r), topLeft: Radius.circular(12.r))), 設(shè)置
四陨溅、TextFiled
1终惑、光標(biāo)問(wèn)題
如果設(shè)置了 controller.text ，并且在 onChanged 發(fā)生變化的時(shí)候 通過(guò) setState(){} 重新更新 text门扇，那就會(huì)使輸入框狀態(tài)發(fā)生變化雹有，光標(biāo)會(huì)回到初始位置。
static textEditingController(String text) {
return TextEditingController.fromValue(TextEditingValue(
// 設(shè)置內(nèi)容
text: text ?? "",
// 保持光標(biāo)在最后
selection: TextSelection.fromPosition(TextPosition(
affinity: TextAffinity.downstream, offset: text == null ? 0 : text.length))));
}
2臼寄、切換焦點(diǎn)
如果一個(gè)頁(yè)面有多個(gè)輸入框件舵，想實(shí)現(xiàn)輸入結(jié)束，點(diǎn)鍵盤(pán)的完成直接去下一個(gè)焦點(diǎn)輸入脯厨，
首先需要給各個(gè)輸入框設(shè)置 focusNode,
然后完成的回調(diào)事件是 onEditingComplete，
通過(guò) FocusScope.of(context).requestFocus(_focusNodePwd); 設(shè)置新的焦點(diǎn)
3坑质、隱藏默認(rèn)下劃線
在 InputDecoration 里 有個(gè) border 將值設(shè)為 InputBorder.none 即可
五合武、系統(tǒng)狀態(tài)欄高度和底部操作欄高度適配問(wèn)題
頂部狀態(tài)欄高度可通過(guò) MediaQueryData.fromWindow(window).padding.top 獲取，
底部操作欄高度可通過(guò) MediaQueryData.fromWindow(window).padding.bottom 獲取涡扼，
在需要依附底部按鈕的地方稼跳，一定需要設(shè)置 margin bottom 操作欄高度，否則按鈕會(huì)被遮擋吃沪，在 iPhone 沒(méi)有 home 鍵的機(jī)型上可以看出來(lái)汤善。
六、分割線
flutter 提供了橫向和縱向的分割線組件可以直接使用
橫線 Divider 票彪，豎線VerticalDivider
在使用的時(shí)候外部需要用 Sizebox 包裹并且分別指定寬高
SizedBox(
width: 1.w,
height: 100,
child: VerticalDivider(
color: Colors.red,
width: 1.w,
),
)
七红淡、監(jiān)聽(tīng) initState 加載完成事件
void initState() {
super.initState();
//界面build完成后執(zhí)行回調(diào)函數(shù)
WidgetsBinding.instance
.addPostFrameCallback((_) => yourFunction(context)); //執(zhí)行yourFunction
}
八、?? 等符號(hào)妙用
如果我們需要從一個(gè)對(duì)象取數(shù)據(jù)渲染降铸，假如數(shù)據(jù)為null在旱，那么就會(huì)報(bào)錯(cuò)一般的方法是判斷
data.str == null ? "" : data.str
但是在用了 dart 語(yǔ)法后，再這么寫(xiě)顯得很low推掸，并且也不夠美觀桶蝎，dart 提供了 ?? 方法，
其結(jié)果和上面的一樣
data.str ?? ""
還有一個(gè)是 ?. 它的意思是如果 data 為 null 就返回 null谅畅，不為 null 返回 data.str 結(jié)果
假如有多級(jí)對(duì)象嵌套登渣，如果不做判空處理那么 組件會(huì)報(bào)錯(cuò)，一般是在進(jìn)行網(wǎng)絡(luò)請(qǐng)求后渲染數(shù)據(jù)毡泻，但是在更新數(shù)據(jù)前我們不想去做 loading 處理
Text(data?.info?.name ?? "");
//相當(dāng)于
Text(data != null && data.info != null && data.info.name != null
? data.info.name
: ""),
這樣寫(xiě)是不是代碼簡(jiǎn)潔了很多胜茧？
九、字符串拼接
盡量少用 +號(hào)來(lái)拼接牙捉，dart 提供了 $ 和 ${} 前者用于單個(gè)對(duì)象竹揍，后者用于多級(jí)數(shù)據(jù)敬飒，
而且如果使用 $ 拼接，無(wú)需對(duì) int double 類(lèi)型數(shù)據(jù)做 toString() 轉(zhuǎn)換芬位。
String a = "11111";
"$a${data.str}"
