flutter中的布局

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

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

他的布局可能是這樣的：

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

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

（使用）放置一個組件

在flutter中如何使用組件呢？很簡單。

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

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

Text('Hello World'),

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

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

比如：創(chuàng)建一個圖標。

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

app 本身就是個組件

試想一下我們平時搭建的vue或者react項目，其實他們本身就都是一個組件而已。

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

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

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

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

flutter也一樣，如果你仔細對比一下vue，或者react項目的入口文件和flutter項目入口文件的區(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) => Mine(), '/yours': (context) => Yours()},
    );
  }
}

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

Material apps 和 Non-Material apps

對于Material app，我們可以使用app本身自帶的一些組件，比如：Scaffold提供了默認的頂部導航，底部導航，抽屜等組件，開發(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 則沒有提供這些組件，我們想要實現(xiàn)那些東西，都需要我們自己動手去封裝。比如：

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的一個主要目的是為我們提供一個組件庫，讓我們可以很快的進行開發(fā)，并且開發(fā)出來的應(yīng)用可以運行在多個平臺上。這意味著我們的應(yīng)用程序在不同尺寸的屏幕上，手機，手表，或者顯示器都有可能。

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

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

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

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

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

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

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

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

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

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

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

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

• AspectRatio
• CustomSingleChildLayout
• CustomMultiChildLayout
• FittedBox
• FractionallySizedBox
• LayoutBuilder
• MediaQuery
• MediaQueryData
• OrientationBuilder

這些都可以用來開發(fā)響應(yīng)式的app應(yīng)用。

小結(jié)

本文簡單介紹一下flutter如何開發(fā)響應(yīng)式app，更多關(guān)于flutter布局響應(yīng)式app的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論