Android開發(fā)組件flutter的20個(gè)常用技巧示例總結(jié)
更新時(shí)間：2022年05月16日 15:00:21 作者：編程小龍
這篇文章主要為大家介紹了Android開發(fā)組件flutter的20個(gè)常用技巧示例總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
1.map遍歷快速實(shí)現(xiàn)邊距，文字自適應(yīng)改變大小
Container(
// padding: EdgeInsets.symmetric(horizontal: 50),
// constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
color: Colors.white,
child: Align(
alignment: Alignment.center,
child: FittedBox( // 當(dāng)一行放不下時(shí)會(huì)自適應(yīng)調(diào)整組件大小
child: Row(
children: [
ElevatedButton(onPressed: () => {}, child: Text("電塔")),
ElevatedButton(onPressed: () => {}, child: Text("嘿嘿")),
ElevatedButton(onPressed: () => {}, child: Text("喲西")),
ElevatedButton(onPressed: () => {}, child: Text("是蠶絲")),
]
.map((e) => Padding( // 遍歷設(shè)置組件左內(nèi)邊距
padding: EdgeInsets.only(left: 30), child: e))
.toList()),
),
));
2.使用SafeArea 添加邊距
在頁面的最外層組件中包裹一個(gè)SafeArea
SafeArea( // 實(shí)質(zhì)就是添加一個(gè)邊距，解決ios最外邊弧角導(dǎo)致的被遮擋
minimum: EdgeInsets.all(30),
chird:...
)
3.布局思路
1.堆疊：使用stack
2.豎直可滾動(dòng)：listView
3.多格，超出自動(dòng)換行：wrap
4.獲取當(dāng)前屏幕的大小
Wrap(
children: dataList
.map((item) => Container(
decoration: BoxDecoration(color: Colors.red),
width: (MediaQuery.of(context).size.width - 10 * 3) / 2, // 適配屏幕一行放兩個(gè)，并且三個(gè)縫隙間隔
))
.toList(),
)
5.文本溢出顯示省略號(hào)
Text(
data.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
6.一個(gè)圓角帶搜索icon的搜索框案例
Expanded(
child: Container(
height: 34,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(17)),
margin: const EdgeInsets.only(right: 10),
child: const TextField(
decoration: InputDecoration(
hintText: "請(qǐng)輸入搜索詞",
hintStyle: TextStyle(color: Colors.grey, fontSize: 14),
contentPadding: EdgeInsets.only(top: 1, left: -10),
border: InputBorder.none,
icon: Padding(
padding: EdgeInsets.only(left: 10, top: 5),
child: Icon(
Icons.search,
size: 18,
color: Colors.grey,
)),
suffixIcon: Icon(
Icons.close,
size: 18,
))),
)),
7.修改按鈕的背景色
ElevatedButton(
onPressed: () {
CommonToast.showToast("退出登錄");
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
),
child: const Text(
'退出登錄',
style: TextStyle(color: Colors.white),
)
),
TextButton(
style: TextButton.styleFrom(primary: Colors.green),
)
8.tab切換實(shí)例
import 'package:flutter/material.dart';
import 'package:hook_up_rent/pages/home/tab_search/data_list.dart';
import 'package:hook_up_rent/widgets/room_list_item_widget.dart';
class RoomManagePage extends StatelessWidget {
const RoomManagePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
initialIndex: 0,
child: Scaffold(
appBar: AppBar(
title: Text("房屋管理"),
centerTitle: true,
bottom: TabBar(
tabs: [
Tab(
text: "空置",
),
Tab(
text: "已租",
)
],
),
),
body: TabBarView(
children: [
ListView(
children:
dataList.map((item) => RoomListItemWidget(item)).toList(),
),
ListView(
children:
dataList.map((item) => RoomListItemWidget(item)).toList(),
)
],
),
));
}
}
9.點(diǎn)擊事件組件點(diǎn)擊空白區(qū)域不觸發(fā)點(diǎn)擊
GestureDetector( behavior: HitTestBehavior.translucent, // 加上即可
10.使用主題色
var buttonTextStyle = TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.w600);
11.往安卓模擬器中傳圖片
往模擬器的sdcard目錄下的DCIM目錄里面丟圖片即可，然后點(diǎn)一下手機(jī)上的圖片應(yīng)用加載一下即可
12.控制text的最大行數(shù)顯示影藏文字
Text(
data.subTitle ?? '暫無房屋概況',
maxLines: showAllText ? null : 2,
),
13.去掉默認(rèn)的抽屜圖標(biāo)
給appbar添加此屬性即可
actions: [Container()], // 填一個(gè)空元素占位，可以填充掉默認(rèn)的抽屜圖標(biāo)，此時(shí)通過左右滑動(dòng)打開對(duì)應(yīng)抽屜
14.圖片占滿屏
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('static/images/loading.jpg'),
fit: BoxFit.fill)),
);
15.倒計(jì)時(shí)
@override
void initState() {
super.initState();
///循環(huán)執(zhí)行
///間隔1秒
_timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
///自增
curentTimer++;
///到5秒后停止
if (curentTimer == 5) {
_timer.cancel();
}
setState(() {});
});
}
@override
void dispose() {
///取消計(jì)時(shí)器
_timer.cancel();
super.dispose();
}
16.固定底部
1.當(dāng)內(nèi)容不會(huì)滾動(dòng)時(shí)可以直接在固定底部的組件上方加一個(gè)spacer組件即可。
2.當(dāng)內(nèi)容會(huì)滾動(dòng)時(shí)需要使用epanded，且該組件只能放置在row、column等組件【不能放在listview，container，stack…】如下所示：
17.添加陰影
// 直接給Container加上如下屬性即可
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 15.0), //陰影xy軸偏移量
blurRadius: 15.0, //陰影模糊程度
spreadRadius: 1.0 //陰影擴(kuò)散程度
)
]),
18.隱藏鍵盤
// 關(guān)閉鍵盤
void _hideKeyboard() {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
/// 取消焦點(diǎn)，相當(dāng)于關(guān)閉鍵盤
FocusManager.instance.primaryFocus!.unfocus();
}
}
// 在頁面最外層包裹一個(gè)點(diǎn)擊事件
GestureDetector(
onTap: _hideKeyboard,
child: Scaffold(
19.獲取父級(jí)組件大小
在原來的build方法中返回組件外面套一層layoutBuilder即可
return LayoutBuilder(builder: (context, constrains) {
var maxWidth = constrains.maxWidth; // 獲取父級(jí)容器大小
return Wrap()
}
20.點(diǎn)擊事件主動(dòng)冒泡
GestureDetector組件會(huì)阻止事件冒泡，此時(shí)用Listenner組件替換即可
Listener(
// 使用listener事件能夠繼續(xù)傳遞
onPointerDown: (event) {
setState(() {
isExpand = !isExpand;
});
},
child: Text('點(diǎn)我'),
),
以上就是Android開發(fā)組件flutter的20個(gè)常用技巧示例總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Android開發(fā)組件flutte的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android實(shí)現(xiàn)騰訊新聞的新聞?lì)悇e導(dǎo)航效果
這篇文章主要介紹了Android實(shí)現(xiàn)騰訊新聞的新聞?lì)悇e導(dǎo)航效果,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了android截屏功能的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果，幫助大家制作網(wǎng)易客戶端導(dǎo)航欄特效，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家詳細(xì)介紹了Android TextView仿微信可折疊效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
ViewPager+RadioGroup實(shí)現(xiàn)左右滑動(dòng)卡片布局
這篇文章主要為大家詳細(xì)介紹了ViewPager+RadioGroup實(shí)現(xiàn)左右滑動(dòng)卡片布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Android之ArcSlidingHelper制作圓弧滑動(dòng)效果
這篇文章主要介紹了Android之ArcSlidingHelper制作圓弧滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
Android?Camera實(shí)現(xiàn)旋轉(zhuǎn)角度
這篇文章主要為大家詳細(xì)介紹了Android?Camera實(shí)現(xiàn)旋轉(zhuǎn)角度，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Android Studio中CodeStyle模板的配置方式
這篇文章主要介紹了Android Studio中CodeStyle模板的配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
這篇文章主要為大家詳細(xì)介紹了Android錄制mp3格式文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
使用RadioButton+Fragment實(shí)現(xiàn)底部導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了使用RadioButton+Fragment實(shí)現(xiàn)底部導(dǎo)航欄效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06