快捷導(dǎo)航

利用Flutter輕松制作紅包界面

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

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

前言

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

FittedBox 簡介

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

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

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

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

使用示例

我們來看一張圖片在不同適配參數(shù)下的效果，這里我們可以在底部切換不同的適配模式，注意這里我們使用了裁剪來防止溢出，clipBehavior參數(shù)為 Clip.antiAlias?？梢钥吹綀D片隨著不同的模式顯示的區(qū)域、對齊也會(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;
            });
          },
        ),
      ],
    ),
  );
}

紅包界面

下面我們來用 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(
                '開',
                style: TextStyle(
                  fontSize: 42.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}