快捷導(dǎo)航

利用Flutter輕松制作紅包界面

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

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

前言

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

FittedBox 簡(jiǎn)介

FittedBox 組件設(shè)計(jì)的目的就是讓其子組件與父級(jí)組件進(jìn)行適配，包括對(duì)齊、縮放、裁剪和溢出處理。

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

如上所示，FittedBox 的定義很簡(jiǎn)潔，只有下面四個(gè)屬性：

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

使用示例

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

上面的示例代碼如下。

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;
            });
          },
        ),
      ],
    ),
  );
}

紅包界面

下面我們來(lái)用 FittedBox 做一個(gè)紅包界面效果，如下圖所示。

這里紅包頂部的深色部分其實(shí)就是用 FittedBox 將一個(gè) Container 貼在了頂部居中位置。具體實(shí)現(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(
                '開(kāi)',
                style: TextStyle(
                  fontSize: 42.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

總結(jié)

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

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

您可能感興趣的文章: