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

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

utopia_widgets 是一个包含多种基本 UI 组件的 Flutter 插件。这些组件可以帮助开发者快速构建复杂的用户界面。

高亮功能

FormLayout 和 TopBottomLayout

FormLayout 和 TopBottomLayout 是两种基本布局，适用于内容较长或较短的屏幕。这两种布局可以确保用户在不滚动到底部的情况下提交表单。

CrossFadeIndexedStack

CrossFadeIndexedStack 类似于 IndexedStack，但不同之处在于页面在切换时会渐变过渡，并且可以延迟初始化。它非常适合用于受 BottomNavigationBar 控制的屏幕内容。

示例代码

以下是一个完整的示例代码，演示如何使用 utopia_widgets 中的组件。

import 'package:flutter/material.dart';
import 'package:utopia_widgets_example/pages/constrained_aspect_ratio.dart';
import 'package:utopia_widgets_example/pages/cross_fade_indexed_stack.dart';
import 'package:utopia_widgets_example/pages/form_layout.dart';
import 'package:utopia_widgets_example/pages/multi_widget.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(
      home: Builder(
        builder: (context) => Scaffold(
          appBar: AppBar(title: const Text("Utopia widgets example")),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 按钮列表，点击后导航到对应的页面
              for (final page in _pageMap.entries)
                ElevatedButton(
                  onPressed: () => Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => page.value),
                  ),
                  child: Text(page.key),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

// 定义页面映射
final _pageMap = {
  "FormLayout": const FormLayoutPage(),
  "CrossFadeIndexedStack": const CrossFadeIndexedStackPage(),
  "MultiWidget": const MultiWidgetPage(),
  "ConstrainedAspectRatio": const ConstrainedAspectRatioPage(),
};

页面实现

以下是几个页面的具体实现代码：

FormLayoutPage

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

class FormLayoutPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return FormLayout(
      children: [
        TextFormField(
          decoration: InputDecoration(labelText: "用户名"),
        ),
        TextFormField(
          decoration: InputDecoration(labelText: "密码"),
        ),
        ElevatedButton(
          onPressed: () {},
          child: Text("提交"),
        ),
      ],
    );
  }
}

CrossFadeIndexedStackPage

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

class CrossFadeIndexedStackPage extends StatefulWidget {
  [@override](/user/override)
  _CrossFadeIndexedStackPageState createState() => _CrossFadeIndexedStackPageState();
}

class _CrossFadeIndexedStackPageState extends State<CrossFadeIndexedStackPage> with TickerProviderStateMixin {
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: "搜索"),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: "个人中心"),
          ],
        ),
        Expanded(
          child: CrossFadeIndexedStack(
            index: _selectedIndex,
            children: [
              Container(color: Colors.red, child: Center(child: Text("首页"))),
              Container(color: Colors.green, child: Center(child: Text("搜索"))),
              Container(color: Colors.blue, child: Center(child: Text("个人中心"))),
            ],
          ),
        ),
      ],
    );
  }
}

MultiWidgetPage

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

class MultiWidgetPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiWidget(
      children: [
        Text("这是第一个子部件"),
        Text("这是第二个子部件"),
        Text("这是第三个子部件"),
      ],
    );
  }
}

ConstrainedAspectRatioPage

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

class ConstrainedAspectRatioPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.tight(Size(200.0, 200.0)),
      child: ConstrainedAspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          color: Colors.amber,
          child: Center(child: Text("固定宽高比")),
        ),
      ),
    );
  }
}