flutter_screenutil

flutter_screenutil是一個(gè)用于在Flutter應(yīng)用程序中進(jìn)行屏幕適配的工具包。它旨在幫助開發(fā)者在不同屏幕尺寸和密度的設(shè)備上創(chuàng)建響應(yīng)式的UI布局。

`flutter_screenutil``提供了一些用于處理尺寸和間距的方法，使得開發(fā)者可以根據(jù)設(shè)備的屏幕尺寸和密度來(lái)動(dòng)態(tài)調(diào)整UI元素的大小和位置。它提供了以下功能：

• 屏幕適配：flutter_screenutil可以根據(jù)設(shè)備的屏幕尺寸和密度，將設(shè)計(jì)稿上的尺寸轉(zhuǎn)換為適合當(dāng)前設(shè)備的實(shí)際尺寸。這樣，無(wú)論是在小屏幕手機(jī)上還是在大屏幕平板電腦上運(yùn)行應(yīng)用，UI元素都能正確地適配屏幕。

• 尺寸適配：flutter_screenutil提供了setWidth()和setHeight()方法，通過(guò)傳入設(shè)計(jì)稿上的尺寸，可以根據(jù)設(shè)備的屏幕寬度進(jìn)行動(dòng)態(tài)調(diào)整，返回適配后的實(shí)際寬度。

• 字體適配：flutter_screenutil提供了setSp()方法，可以根據(jù)設(shè)備的屏幕密度進(jìn)行字體大小的適配。通過(guò)傳入設(shè)計(jì)稿上的字體大小，可以根據(jù)當(dāng)前設(shè)備的屏幕密度動(dòng)態(tài)調(diào)整字體大小。

官方文檔
https://pub-web.flutter-io.cn/packages/flutter_screenutil

安裝

flutter pub add flutter_screenutil

原理

UI 設(shè)計(jì)的時(shí)候一般會(huì)按照一個(gè)固定的尺寸進(jìn)行設(shè)計(jì)，如 360 x 690 ，實(shí)際設(shè)備分辨率可能是 Google Pixel: 1080 x 1920 等。開發(fā)時(shí)如果直接按照設(shè)計(jì)圖寫死數(shù)值則會(huì)出現(xiàn)最后實(shí)現(xiàn)的效果跟設(shè)計(jì)效果不一致的情況。這個(gè)時(shí)候就可以用比例的方式來(lái)進(jìn)行適配。

將設(shè)計(jì)圖分為固定單位并給這個(gè)單位定義一個(gè)標(biāo)識(shí)，例如就叫 w，然后通過(guò)獲取設(shè)備分辨率，使用設(shè)備真實(shí)寬度除以設(shè)計(jì)圖寬度 ，就得到了 1w 代表的真實(shí)寬度:

1w = 設(shè)備真實(shí)寬度 / 設(shè)計(jì)圖寬度

如設(shè)計(jì)圖尺寸是 360 x 690 ，則寬度為 360w ，真實(shí)設(shè)備寬度為 1080 則 1w = 1080 / 360 = 3。

示例

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      // 設(shè)計(jì)尺寸
      designSize: const Size(360, 690),
      // 是否根據(jù)最小寬度和高度調(diào)整文本
      minTextAdapt: true,
      builder: (context, child) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: child,
        );
      },
      child: const MyHomePage(title: '適配'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
            child: const Text(
              "適配后的的尺寸",
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Container(
            width: ScreenUtil().setWidth(200),
            height: ScreenUtil().setWidth(200),
            color: Colors.blue,
            child: Text(
              "適配后的的尺寸",
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(20), color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

常用方法

ScreenUtil().setWidth(540)  //根據(jù)屏幕寬度適配尺寸
ScreenUtil().setHeight(200) //根據(jù)屏幕高度適配尺寸(一般根據(jù)寬度適配即可)
ScreenUtil().radius(200)    //根據(jù)寬度或高度中的較小者進(jìn)行調(diào)整
ScreenUtil().setSp(24)      //字體大小適配

為了方便使用，還支持簡(jiǎn)寫

ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp

注意：
一般情況下 1.w != 1.h ，除非剛好屏幕分辨率比例與設(shè)計(jì)圖比例一致，所以如果要設(shè)置正方形，切記使用相同的單位，如都設(shè)置相同的 w 或者 h ，否則可能顯示為長(zhǎng)方形。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-638225.html

到了這里，關(guān)于Flutter：屏幕適配的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！