Flutter 約束寬高比的控件 AspectRatio

時間 2019-12-06

標籤 flutter 約束控件 aspectratio 简体版

原文原文鏈接

在搭建 UI 的過程當中，常常會出現要求約束寬高比的需求。git

好比，把照片變成 16:9 或者 4:3 ，這個時候你會怎麼作？github

是動態設置？仍是寫死寬高？express

爲此，Flutter 爲咱們提供了能夠約束寬高比的控件 AspectRatio。app

基本操做

仍是按照慣例，先看官方文檔：less

A widget that attempts to size the child to a specific aspect ratio.ide

The widget first tries the largest width permitted by the layout constraints. The height of the widget is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height.函數

嘗試將子項調整爲特定寬高比的 widget。佈局

widget 首先嚐試佈局約束所容許的最大寬度。經過給定的寬高比來肯定小部件的高度，表示爲寬度與高度的比率。ui

仍是同樣沒有demo，不過這種控件使用起來是比較簡單的，直接來看構造函數：this

const AspectRatio({
  Key key,
  @required this.aspectRatio,
  Widget child,
}) : assert(aspectRatio != null),
super(key: key, child: child);
複製代碼

構造函數很是簡單，只須要一個 寬高比 和一個 child。

擼碼前有個點要注意一下，文檔上面說了，該widget 首先會嘗試佈局約束所容許的最大寬度。

也就是說，直接放一個 AspectRatio 上去他就是最大寬度的。

鑑於此，咱們寫demo的時候要先限定一下它的寬度。

class AspectRatioPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AspectRatioPage'),
      ),
      body: Center(
        child: Container(
          width: 300, // 限定一下寬度
          child: AspectRatio(
            aspectRatio: 16.0 / 9.0, // 設置寬高比爲16:9
            child: Image.asset(
              'images/game3.jpg',
              fit: BoxFit.cover, //需設置一下裁剪模式來查看效果
            ),
          ),
        ),
      ),
    );
  }
}
複製代碼

效果以下：

把寬高比設置爲4:3 看一下：

能夠看到，確實是按照咱們輸入的比例來執行的。

與GridView 聯動

咱們可能遇到更多的需求是：在GridView 中，也要控制住每一張圖片的寬高比。

若是沒有AspectRatio 控件則比較難實現，由於要算間距之類的。

可是有了 AspectRatio，咱們的代碼就會簡單不少，看一張動圖：

能夠看到，咱們只需簡單的更改寬高比，便可自動設置。

代碼以下：

class AspectRatioPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AspectRatioPage'),
      ),
      body: Center(
        child: _createGridView(),
      ),
    );
  }

  Widget _createGridView() {
    return GridView.builder(
      itemCount: 6,
      shrinkWrap: true,
      padding: EdgeInsets.all(10), // padding
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 每一行的個數
        mainAxisSpacing: 10, // 間距
        crossAxisSpacing: 10,
      ),
      itemBuilder: (context, index) {
        return Container(
          alignment: Alignment.center,
          child: AspectRatio(
            aspectRatio: 1, // 寬高比
            child: Image.asset(
              'images/game3.jpg',
              fit: BoxFit.cover,
            ),
          ),
        );
      },
    );
  }
}
複製代碼

設置每一行爲3個，間距爲10，這時 Flutter 會自動給咱們算出來咱們控件的寬高。

這個時候咱們就只須要設置寬高比便可設置合適的寬高。

設置不符合常理的寬高

前面咱們設置的都是符合常理的寬高。

好比，咱們限制了外部容器的寬高都爲100。

第一種狀況：寬高比爲 2，設置寬爲100，那麼高會自動算出來爲50，這樣是合理的。

第二種狀況：寬高比爲0.5，也就是說高比寬更長，那這個時候我設置寬爲100，會是什麼樣的結果？

正常來講，高應該爲200，可是咱們前面限定了寬高都爲100。

這個時候AspectRatio會根據當前最高的值自動再計算一次寬高比，算出來寬應爲50。

咱們可使用剛纔的GridView 來實現這個猜測，由於GridView中的寬高就是限制好的。

看一下代碼：

Widget _createGridView() {
  return GridView.builder(
    itemCount: 6,
    shrinkWrap: true,
    padding: EdgeInsets.all(10),
    // padding
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, // 每一行的個數
      mainAxisSpacing: 10, // 間距
      crossAxisSpacing: 10,
    ),
    itemBuilder: (context, index) {
      return Container(
        alignment: Alignment.center,
        child: AspectRatio(
          aspectRatio: 0.5, // 寬高比
          child: Image.asset(
            'images/game3.jpg',
            fit: BoxFit.cover,
          ),
        ),
      );
    },
  );
}
複製代碼