欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論