Flutter自定义UI组件插件knt_ui的使用

knt_ui 是一个包含适用于多个 Flutter 项目的实用 UI 组件的 Flutter 包。本文将通过一个完整的示例来演示如何在项目中使用 knt_ui。

开始使用

安装 knt_ui

首先，你需要在 pubspec.yaml 文件中添加 knt_ui 依赖项：

dependencies:
  flutter:
    sdk: flutter
  knt_ui: ^1.0.0  # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

初始化配置

在应用启动时，配置 knt_ui 的主题颜色和其他参数。以下是一个示例：

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

import 'kntgen/generated_page.dart';
import 'repo/poh_repo.dart';
import 'resources.dart';
import 'ui/pages/new_main_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  EasyLocalization.logger.enableBuildModes = [];
  KntUi.config(
    primaryColor: ColorName.pinkPiano,
    secondaryColor: ColorName.intotheStratosphere,
  );
  runApp(const MyApp());
}

创建应用入口

创建一个基本的 Flutter 应用，并将其包装在 KntAppWrapper 中，以便使用 knt_ui 提供的功能。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return KntAppWrapper(
      supportedLocales: const [Locale(DefinedSetting.defaultLanguageCode)],
      debugShowPreviewDevice: false,
      appBuilder: (context, devicePreviewLocale, devicePreviewAppBuilder) {
        return MaterialApp(
          title: 'Flutter Demo',
          locale: devicePreviewLocale,
          localizationsDelegates: context.localizationDelegates,
          supportedLocales: context.supportedLocales,
          builder: devicePreviewAppBuilder,
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

自定义底部导航栏

下面是一个带有自定义图标和工具栏的底部导航栏的示例：

abstract class TabIconMain {
  static final TabIcon home = TabIcon(
    localeKeyTitle: LocaleKeys.main_tabs_home,
    activeImagePath: Assets.images.icHomeOn.path,
    inactiveImagePath: Assets.images.icHomeOff.path,
  );
  static final TabIcon garden = TabIcon(
    localeKeyTitle: LocaleKeys.main_tabs_help,
    activeImagePath: Assets.images.icGardenOn.path,
    inactiveImagePath: Assets.images.icGardenOff.path,
  );

  static final List<TabIcon> values = [home, garden];
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  final List<Photo> _photos = [];
  final _needConcurrent = false;
  final _onTabChanged = ValueNotifier<int>(0);

  [@override](/user/override)
  void initState() {
    super.initState();
    _photos.addAll(List.generate(
        13,
        (index) => Photo(
              id: index.toString(),
              coverUri: Assets.images.imgCollectionBackyard.path,
              mediumSizeUri: Assets.images.imgCollectionBackyard.path,
              thumbnailUri: Assets.images.imgCollectionBackyard.path,
              storageType: StorageType.assets,
            )));
    _photos.addAll(List.generate(
        7,
        (index) => Photo(
              id: index.toString(),
              coverUri: Assets.images.imgCollectionBathroom.path,
              mediumSizeUri: Assets.images.imgCollectionBathroom.path,
              thumbnailUri: Assets.images.imgCollectionBathroom.path,
              storageType: StorageType.assets,
            )));
    _photos.addAll(List.generate(
        4,
        (index) => Photo(
              id: index.toString(),
              coverUri: Assets.images.imgCollectionBedroom.path,
              mediumSizeUri: Assets.images.imgCollectionBedroom.path,
              thumbnailUri: Assets.images.imgCollectionBedroom.path,
              storageType: StorageType.assets,
            )));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return KntBottomNavScaffold(
      onTabChanged: _onTabChanged,
      appBar: KntAppBar(titlePage: 'KNT demo'),
      navColor: Colors.orange,
      navBorderRadius: BorderRadius.circular(32.w),
      showLabel: false,
      icons: TabIconMain.values,
      iconSize: 48.w,
      tabs: [
        SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const KntDefaultToolBar(titlePage: 'Test tool bar 1'),
              KntBaseToolBar(
                titlePage: 'Test tool bar 2 - Test tool bar 2 - Test tool bar 2',
                leadingIcon: Container(
                  width: 56.w,
                  height: 56.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: ColorName.black.withAlpha(75),
                  ),
                  child: Icon(
                    Icons.arrow_back_rounded,
                    color: ColorName.white,
                    size: 20.w,
                  ),
                ),
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Color(0xFF28D581),
                      Color(0xFF33A36D),
                    ],
                    begin: Alignment(1.14, 1.1),
                    end: Alignment(-1.08, -0.73),
                    stops: [
                      0.00,
                      1.00,
                    ],
                  ),
                ),
              ),
              Container(
                height: 248.w,
                padding: EdgeInsets.only(bottom: 24.w),
                child: KntStaggeredGallery(
                  direction: Axis.horizontal,
                  padding: EdgeInsets.only(
                    left: 24.w,
                    right: 12.w,
                  ),
                  photos: _photos,
                  convertedSeeAllText: (hiddenPhotos) => 'Seeall $hiddenPhotos',
                ),
              ),
              FutureBuilder<String>(
                future: _loginPoh(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const KntProgressBar(color: Colors.blue);
                  }
                  if (snapshot.hasError) {
                    return Text(
                      snapshot.error?.toString() ?? '',
                      style: TextStyle(
                        color: Colors.orange,
                        fontSize: 20.sp,
                      ),
                    );
                  }
                  if (snapshot.hasData) {
                    return Text(
                      snapshot.data ?? 'Has empty data',
                      maxLines: 3,
                      style: TextStyle(
                        color: Colors.orange,
                        fontSize: 20.sp,
                      ),
                    );
                  }
                  return Container(
                    height: 50.w,
                    color: Colors.orange,
                  );
                },
              ),
              SizedBox(height: 16.w),
              KntSimpleEditText(
                defaultValue: 'Type here',
                hintText: 'Type me...',
                contentPadding: EdgeInsets.symmetric(
                  horizontal: 16.w,
                  vertical: 20.w,
                ),
              ),
              SizedBox(height: 16.w),
              KntSimpleButton(
                title: LocaleKeys.main_navigate_web.tr(),
                onPressed: () {
                  KntWebPage.push(
                    context,
                    url: 'https://www.google.com',
                    headerColor: Colors.blue,
                  );
                },
              ),
              KntSimpleButton(
                title: LocaleKeys.main_navigate_tabHelp.tr(),
                onPressed: () {
                  _onTabChanged.value = 1;
                },
              ),
              KntSimpleButton(
                title: LocaleKeys.main_navigate_generatedPage.tr(),
                onPressed: () {
                  GeneratedPage.push(context);
                },
              ),
              KntSimpleButton(
                title: LocaleKeys.main_navigate_mainGeneratedPage.tr(),
                onPressed: () {
                  NewMainPage.push(context);
                },
              ),
              KntSimpleButton(
                onPressed: () => context.onError('Show fucking noobs!'),
                title: 'Show Toast',
                textColor: ColorName.black,
                borderColor: ColorName.butterTart,
                backgroundColor: ColorName.white,
                borderWidth: 2.w,
              ),
              KntImage.network(
                width: 256.w,
                height: 256.w,
                uri: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3FID%3DOIP.uIgI--NBV7O7HCKmv5Ab2gHaFh%26pid%3DApi&f=1',
              ),
              const KntDivider(),
              SizedBox(height: 20.w),
              const KntDashDivider(),
              SizedBox(height: 20.w),
              const KntDefaultIssuingWidget(
                errorMessage: 'Abc',
              ),
              const KntChip(text: 'abc'),
              KntDefaultImage(
                width: 64.w,
                height: 64.w,
              ),
            ],
          ),
        ),
        Container(
          color: Colors.green,
        ),
      ],
    );
  }

  Future<String> _loginPoh() async {
    final repo = PohRepo();
    await repo.init();
    return await repo.login(needConcurrent: _needConcurrent);
  }
}