利用Flutter輕松制作紅包界面

更新時間：2022年11月15日 08:22:39 作者：島上碼農(nóng)

這篇文章主要為大家詳細介紹了如何利用Flutter實現(xiàn)輕松制作一個紅包界面，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以了解一下

前言

在 Flutter 的開發(fā)中，最常見的就是層層的組件嵌套，因此不可避免會遇到子組件如何適配父組件的問題。比如，按鈕的可點擊區(qū)域是否要占滿整個父組件？圖片是居中還是居左？這些問題可以通過 Flutter 提供的FittedBox 組件來解決。

FittedBox 簡介

FittedBox 組件設計的目的就是讓其子組件與父級組件進行適配，包括對齊、縮放、裁剪和溢出處理。

const FittedBox({
  Key? key,
  this.fit = BoxFit.contain,
  this.alignment = Alignment.center,
  this.clipBehavior = Clip.none,
  Widget? child,
})

如上所示，FittedBox 的定義很簡潔，只有下面四個屬性：

fit：子組件和父組件的適配模式，BoxFit 枚舉，包括了不處理（none）、盡量包含（contain），拉伸填滿（fill），寬度方向填滿（fitWidth），高度方向填滿（fitHeight）和縮小到父組件內(nèi)（scaleDown)，具體適配的樣式可以看官方的文檔不同 BoxFit 樣式。
alignment：子組件與父組件的對齊方式，包括居中（center）、左側居中(centerLeft)、右側居中(centerRight)，頂部居中（topCenter）、底部居中（bottomCenter）等。
clipBehavior：超出后的裁剪模式，即子組件溢出父組件后要不要裁剪，不裁剪的話子組件可能會超出父組件的顯示范圍。
child：要適配的子組件。

使用示例

我們來看一張圖片在不同適配參數(shù)下的效果，這里我們可以在底部切換不同的適配模式，注意這里我們使用了裁剪來防止溢出，clipBehavior參數(shù)為 Clip.antiAlias?？梢钥吹綀D片隨著不同的模式顯示的區(qū)域、對齊也會不同，這就給我們提供了子組件適配很大的靈活性。

上面的示例代碼如下。

var _fit = BoxFit.none;
var _alignment = Alignment.center;
@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    appBar: AppBar(
        title: const Text('FittedBox'), backgroundColor: Colors.red[400]!),
    body: Center(
      child: Container(
        width: MediaQuery.of(context).size.width - 30.0,
        height: 160.0,
        color: Colors.blue,
        child: FittedBox(
          alignment: _alignment,
          fit: _fit,
          clipBehavior: Clip.antiAlias,
          child: Image.asset('images/girl.jpeg'),
        ),
      ),
    ),
    bottomSheet: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        DropdownButton(
          items: const [
            DropdownMenuItem<BoxFit>(
              value: BoxFit.none,
              child: Text('BoxFit.none'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.contain,
              child: Text('BoxFit.contain'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.fill,
              child: Text('BoxFit.fill'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.cover,
              child: Text('BoxFit.cover'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.fitHeight,
              child: Text('BoxFit.fitHeight'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.fitWidth,
              child: Text('BoxFit.fitWidth'),
            ),
            DropdownMenuItem<BoxFit>(
              value: BoxFit.scaleDown,
              child: Text('BoxFit.scaleDown'),
            ),
          ],
          value: _fit,
          onChanged: (fit) {
            setState(() {
              _fit = fit as BoxFit;
            });
          },
        ),
        DropdownButton(
          items: const [
            DropdownMenuItem<Alignment>(
              value: Alignment.center,
              child: Text('Alignment.center'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.centerLeft,
              child: Text('Alignment.centerLeft'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.centerRight,
              child: Text('Alignment.centerRight'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.topCenter,
              child: Text('Alignment.topCenter'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.bottomCenter,
              child: Text('Alignment.bottomCenter'),
            ),
            DropdownMenuItem<Alignment>(
              value: Alignment.topLeft,
              child: Text('Alignment.topLeft'),
            ),
          ],
          value: _alignment,
          alignment: AlignmentDirectional.center,
          onChanged: (alignment) {
            setState(() {
              _alignment = alignment as Alignment;
            });
          },
        ),
      ],
    ),
  );
}

紅包界面

下面我們來用 FittedBox 做一個紅包界面效果，如下圖所示。

這里紅包頂部的深色部分其實就是用 FittedBox 將一個 Container 貼在了頂部居中位置。具體實現(xiàn)代碼如下所示。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    appBar: AppBar(
        title: const Text('FittedBox'), backgroundColor: Colors.red[400]!),
    body: Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 240.0,
            height: 400.0,
            color: Colors.red,
            child: FittedBox(
              alignment: Alignment.topCenter,
              fit: BoxFit.fitWidth,
              clipBehavior: Clip.antiAlias,
              child: Container(
                height: 50.0,
                width: 160.0,
                decoration: BoxDecoration(
                  borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(160.0),
                      bottomRight: Radius.circular(160.0)),
                  color: Colors.red[800],
                ),
              ),
            ),
          ),
          ClipOval(
            child: Container(
              width: 80,
              height: 80,
              alignment: Alignment.center,
              color: Colors.yellow[700],
              child: const Text(
                '開',
                style: TextStyle(
                  fontSize: 42.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

總結

本篇介紹了 Flutter 中的布局組件 FittedBox 的使用。FittedBox 是一個非常簡單、但實用的組件，通過它，我們可以將子組件按一定的方式適配到父組件實現(xiàn)所需要的布局，從而簡化開發(fā)中的布局樣式的代碼編寫。

到此這篇關于利用Flutter輕松制作紅包界面的文章就介紹到這了,更多相關Flutter紅包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

使用Android系統(tǒng)提供的DownloadManager來下載文件
本篇文章主要介紹了使用Android系統(tǒng)提供的DownloadManager來下載文件，可以將長時間的下載任務交給系統(tǒng)，完全由系統(tǒng)管理，有需要的可以了解下。
2016-11-11
Android中獲取sha1證書指紋數(shù)據(jù)的方法
大家都知道在Android開發(fā)中，經(jīng)常要獲取sha1證書指紋，所以這篇文章主要介紹在Android中如何使用命令獲取sha1證書指紋數(shù)據(jù)的方法，有需要的可以參考借鑒。
2016-09-09
Android使用jni調用c++/c方法詳解
這篇文章主要介紹了Android使用jni調用c++/c方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Android實現(xiàn)多媒體錄音筆
這篇文章主要介紹了Android實現(xiàn)多媒體錄音筆的相關資料，以及在實現(xiàn)過程中遇到問題的解決方法，感興趣的小伙伴們可以參考一下
2016-01-01
Android?FileProvider使用教程
主要摘要關鍵知識點和記錄我的學習思路及驗證結論，可以幫助讀者比較全面的認識FileProvider，F(xiàn)ileProvider是特殊的ContentProvider，目標是在為保護隱私和數(shù)據(jù)安全而加強應用沙箱機制的同時，支持在應用間共享文件
2023-03-03
Android Studio搜索功能(查找功能)及快捷鍵圖文詳解
這篇文章主要介紹了Android Studio搜索功能(查找功能)及快捷鍵圖文詳解，本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下
2017-12-12
Android 中添加水平線和垂直線方法總結
這篇文章主要介紹了Android 中添加水平線和垂直線方法總結的相關資料,需要的朋友可以參考下
2017-02-02
Android BottomNavigationBar底部導航的使用方法
這篇文章主要為大家詳細介紹了Android BottomNavigationBar底部導航的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
Android listView 繪制表格實例詳解
這篇文章主要介紹了Android listView 繪制表格實例詳解的相關資料,這里附有實例代碼及實現(xiàn)效果圖，利用listView 繪制表格提供實現(xiàn)思路，需要的朋友可以參考下
2017-01-01
Android中Activity的四種啟動模式和onNewIntent()
android 中activity的啟動模式分為四種，（standard、singleTop、singTask、singleInstance），本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-08-08