Flutter原生标签显示插件flutter_native_label的使用

Flutter原生标签显示插件flutter_native_label的使用

概述

flutter_native_label 是一个用于在Flutter应用中显示原生iOS标签（UILabel）的插件。该插件主要用于解决一些Flutter框架中存在的问题。

使用场景

• 仅支持iOS：此插件目前只支持iOS平台。
• 解决特定问题：该插件用于解决以下Flutter框架中的问题：
  • flutter/flutter#28894
  • flutter/flutter#95644
  • flutter/flutter#98342
  • flutter/flutter#102484
  • flutter/flutter#101569

示例代码

主页面布局

首先，我们创建一个主页面布局，其中包含两个列表项，分别点击可以跳转到不同的示例页面。

import 'package:flutter/material.dart';
import 'package:flutter_native_label/flutter_native_label.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Native Label examples'),
        ),
        body: Builder(
          builder: (innerContext) {
            return ListView(
              children: [
                ListTile(
                  title: const Text('Intrinsic size test'),
                  onTap: () {
                    Navigator.push(
                        innerContext,
                        MaterialPageRoute(
                          builder: (context) => const IntrinsicSizeExample(),
                        ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('Infinite list test'),
                  onTap: () {
                    Navigator.push(
                        innerContext,
                        MaterialPageRoute(
                          builder: (context) => const InfiniteListExample(),
                        ),
                    );
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

Intrinsic Size 示例

该示例展示了如何使用NativeLabel来设置标签的内在大小。

class IntrinsicSizeExample extends StatelessWidget {
  const IntrinsicSizeExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Intrinsic size example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Row(
              children: [
                Flexible(
                  child: NativeLabel(
                    'Hello world!',
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15.0),
                      color: Colors.green,
                    ),
                    edgeInsetLeft: 40.0,
                    edgeInsetRight: 40.0,
                    edgeInsetTop: 40.0,
                    edgeInsetBottom: 40.0,
                    style: const TextStyle(
                      fontFamily: 'Noteworthy',
                      fontSize: 20.0,
                    ),
                  ),
                ),
                const SizedBox(width: 40.0),
              ],
            ),
            const SizedBox(height: 20.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                const SizedBox(width: 40.0),
                Flexible(
                  child: NativeLabel(
                    'The quick brown fox jumps over the lazy dog',
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15.0),
                      color: Colors.green,
                    ),
                    edgeInsetLeft: 10.0,
                    edgeInsetRight: 10.0,
                    edgeInsetTop: 10.0,
                    edgeInsetBottom: 10.0,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20.0),
            Row(
              children: [
                Flexible(
                  child: NativeLabel(
                    "👍👍👍 I couldn't agree more",
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15.0),
                      color: Colors.green,
                    ),
                    edgeInsetLeft: 20.0,
                    edgeInsetRight: 20.0,
                    edgeInsetTop: 20.0,
                    edgeInsetBottom: 20.0,
                  ),
                ),
                const SizedBox(width: 40.0),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

无限列表示例

该示例展示了如何在无限滚动列表中使用NativeLabel。

class InfiniteListExample extends StatelessWidget {
  const InfiniteListExample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Infinite list example'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (_, index) {
                return Row(
                  children: [
                    Flexible(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: NativeLabel(
                          "a 👍${List.filled(index, '👍aaa').join()}",
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15.0),
                            color: Colors.green,
                          ),
                          edgeInsetLeft: 10.0,
                          edgeInsetRight: 10.0,
                          edgeInsetTop: 10.0,
                          edgeInsetBottom: 10.0,
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}