Flutter UI组件库插件tolyui的使用

在本篇文章中，我们将详细介绍如何使用Flutter UI组件库插件tolyui。通过示例代码展示其基本功能和使用方法。

在线演示地址

您可以访问以下在线地址查看效果：

基础组件

链接组件 TolyLink

TolyLink 是一个基础的链接组件，可以用于创建可点击的链接。

示例代码

import 'package:flutter/material.dart';
import 'package:tolyui/tolyui.dart'; // 导入tolyui包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TolyLink 示例')),
        body: Center(
          child: TolyLink( // 使用TolyLink组件
            text: '点击这里跳转到官网',
            url: 'https://flutter.dev', // 点击后跳转的URL
            textStyle: TextStyle(color: Colors.blue, fontSize: 18),
          ),
        ),
      ),
    );
  }
}

行为组件 TolyAction

TolyAction 是一个行为触发组件，可以绑定点击事件并执行相应的操作。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TolyAction 示例')),
        body: Center(
          child: TolyAction( // 使用TolyAction组件
            text: '点击执行操作',
            onPressed: () {
              print('按钮被点击了！'); // 绑定点击事件
            },
            textStyle: TextStyle(color: Colors.green, fontSize: 18),
          ),
        ),
      ),
    );
  }
}

表单组件

输入框组件 TolyInputArea

TolyInputArea 是一个表单输入组件，支持文本输入。

示例代码

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

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

class MyApp extends StatelessWidget {
  final TextEditingController _controller = TextEditingController(); // 控制输入框内容

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TolyInputArea 示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TolyInputArea( // 使用TolyInputArea组件
                controller: _controller, // 绑定控制器
                hintText: '请输入内容',
                labelText: '输入框',
                keyboardType: TextInputType.text, // 设置键盘类型
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print('输入的内容是: ${_controller.text}'); // 获取输入框内容
                },
                child: Text('获取输入内容'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

选择器组件 TolySelect

TolySelect 是一个下拉选择组件，支持多种选项。

示例代码

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

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

class MyApp extends StatelessWidget {
  String _selectedValue = ''; // 存储选中的值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TolySelect 示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TolySelect( // 使用TolySelect组件
                value: _selectedValue,
                items: ['选项一', '选项二', '选项三'], // 设置选项列表
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value; // 更新选中的值
                  });
                },
              ),
              SizedBox(height: 20),
              Text('当前选择: $_selectedValue'), // 显示选中的值
            ],
          ),
        ),
      ),
    );
  }

  void setState(VoidCallback fn) {}
}