快捷導(dǎo)航

flutter中的布局和響應(yīng)式app方法示例

更新時(shí)間：2022年12月07日 08:33:46 作者：前端那些年

這篇文章主要為大家介紹了flutter中的布局和響應(yīng)式app方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

flutter中的布局

flutter布局機(jī)制的核心是組件。在flutter中，幾乎所有的東西都是組件，布局模型也不例外。圖片，Icon, 文本等等，我們?cè)趂lutter客戶端中看到的所有內(nèi)容都是組件。我們看不到的東西，比如：rows，columns,等等等等也都是組件。

我們將簡(jiǎn)單的組件組合在一起，構(gòu)成復(fù)雜的組件。比如我們經(jīng)常寫的導(dǎo)航欄：

他的布局可能是這樣的：

用樹形圖來表示是這樣的：

圖中的大部分內(nèi)容應(yīng)該跟我們想象中的差不了多少，可能會(huì)有些人對(duì)Containter有些疑惑，Containter其實(shí)是一個(gè)容器組件，我們可以用它來控制一些子組件的展示，比如我們想要添加padding，margin，border，background- color等屬性時(shí)，我們就可以用它來控制，用法和div基本一樣。

（使用）放置一個(gè)組件

在flutter中如何使用組件呢？很簡(jiǎn)單。

比如，我想要一個(gè)居中的效果，那么我就使用Center組件；想要水平布局，我就使用row組件，想要垂直效果，就使用column組件。想要一個(gè)列表，那就listview組件，如此而已。

比如：創(chuàng)建一個(gè)文本。

Text('Hello World'),

比如：創(chuàng)建一個(gè)圖片。

Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
)

比如：創(chuàng)建一個(gè)圖標(biāo)。

Icon(
  Icons.star,
  color: Colors.red[500],
)

app 本身就是個(gè)組件

試想一下我們平時(shí)搭建的vue或者react項(xiàng)目，其實(shí)他們本身就都是一個(gè)組件而已。

從bootstrap開始，或者講的更透徹一些，從我們執(zhí)行：

let app = new vue()  // let app =  createapp()
app.mount('#app', true)

mount執(zhí)行完成后，全局項(xiàng)目的大組件就已經(jīng)跑起來了。

然后我們又在各個(gè)模塊中創(chuàng)建了頁(yè)面，拆分了模塊...

flutter也一樣，如果你仔細(xì)對(duì)比一下vue，或者react項(xiàng)目的入口文件和flutter項(xiàng)目入口文件的區(qū)別：

import 'package:flutter/material.dart';
import 'mine.dart';
import './yours.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {'/mine': (context) =&gt; Mine(), '/yours': (context) =&gt; Yours()},
    );
  }
}

發(fā)現(xiàn)了嗎，其實(shí)是一樣的套路，實(shí)例化了一個(gè)全局的app,一個(gè)全局的組件。

Material apps 和 Non-Material apps

對(duì)于Material app，我們可以使用app本身自帶的一些組件，比如：Scaffold提供了默認(rèn)的頂部導(dǎo)航，底部導(dǎo)航，抽屜等組件，開發(fā)起來非常方便。比如：

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

而Non-Material apps 則沒有提供這些組件，我們想要實(shí)現(xiàn)那些東西，都需要我們自己動(dòng)手去封裝。比如：

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      child: const Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

自適應(yīng)和響應(yīng)式

flutter的一個(gè)主要目的是為我們提供一個(gè)組件庫(kù)，讓我們可以很快的進(jìn)行開發(fā)，并且開發(fā)出來的應(yīng)用可以運(yùn)行在多個(gè)平臺(tái)上。這意味著我們的應(yīng)用程序在不同尺寸的屏幕上，手機(jī)，手表，或者顯示器都有可能。

所以，我們的應(yīng)用應(yīng)該是響應(yīng)式的，或者叫自適應(yīng)。

自適應(yīng)和響應(yīng)式聽起來很相似，但是它們是一回事兒?jiǎn)?？也許未必如此。

自適應(yīng)和響應(yīng)式其實(shí)是兩個(gè)維度的東西。我們可以開發(fā)一個(gè)沒有響應(yīng)式的自適應(yīng)程序，也可以開發(fā)一個(gè)沒有自適應(yīng)的響應(yīng)式程序。也許有些人會(huì)很疑惑，沒有響應(yīng)式的自適應(yīng)程序，比如我要兼容三個(gè)設(shè)備，那么我寫三套代碼去兼容它們，這就是非響應(yīng)式的自適應(yīng)程序。

當(dāng)然，我們也可以開發(fā)出既是自適應(yīng)，又是響應(yīng)式的程序。

什么是響應(yīng)式？通常情況下，自適應(yīng)的應(yīng)用程序的布局可以根據(jù)屏幕大小進(jìn)行調(diào)整。比如用戶調(diào)整了窗口大小，旋轉(zhuǎn)了設(shè)備方向，那么就會(huì)重新進(jìn)行布局。這一點(diǎn)在應(yīng)用運(yùn)行在不同的設(shè)備上時(shí)，顯得尤為重要。

什么是自適應(yīng)？應(yīng)用程序在不同的設(shè)備上運(yùn)行，我們需要處理鼠標(biāo)，鍵盤輸入以及觸摸輸入等功能，需要我們對(duì)程序的視覺效果，組件的工作方式，API在各個(gè)平臺(tái)上的兼容性有一定的了解。

如此看來，響應(yīng)式似乎側(cè)重于布局，而自適應(yīng)則既要考慮布局，又要兼顧功能。

flutter實(shí)現(xiàn)響應(yīng)式的方法

使用flutter我們可以非常方便的開發(fā)出響應(yīng)式或自適應(yīng)的app。有兩種可行的方案：

一種是利用LayoutBuilder這個(gè)類。通過它的builder屬性，我們可以獲取到BoxConstraints對(duì)象，檢查容器的約束性來決定展示什么。比如：如果我們的maxWidth大于我們的屏幕寬度的臨界點(diǎn)，就返回一個(gè)包含列表的Scaffold對(duì)象。如果小于屏幕的臨界點(diǎn)，就基別的因素進(jìn)行布局。

另外一種是使用媒體查詢技術(shù)MediaQuery.of()。它可以獲取我們當(dāng)前應(yīng)用的size,orientation等信息，我們可以根據(jù)獲取的信息作出一些有利于我們應(yīng)用展示效果的決策。

其他的可以用來創(chuàng)建響應(yīng)式ui的組件有，比如：