135 lines
4.3 KiB
Dart
135 lines
4.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:styled_widget/styled_widget.dart';
|
|
|
|
class TestPage extends StatelessWidget {
|
|
const TestPage({super.key});
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final cs = Theme.of(context).colorScheme;
|
|
return Scaffold(
|
|
appBar: AppBar(title: Text('Test'), backgroundColor: cs.inversePrimary),
|
|
body: Center(child: Text('Hello', style: TextStyle(color: cs.primary))),
|
|
bottomNavigationBar: NavigationBar(
|
|
selectedIndex: 0,
|
|
destinations: const [
|
|
NavigationDestination(icon: Icon(Icons.home), label: '首页'),
|
|
NavigationDestination(icon: Icon(Icons.settings), label: '设置'),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class AllWidgetsDemo extends HookWidget {
|
|
const AllWidgetsDemo({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final switchValue = useState(true);
|
|
final checkboxValue = useState(false);
|
|
final radioValue = useState(1);
|
|
final dropdownValue = useState('A');
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(title: const Text('Flutter Hooks 组件 Demo')),
|
|
body: ListView(
|
|
padding: const EdgeInsets.all(16),
|
|
children: [
|
|
const Text('✅ 按钮类').padding(bottom: 8),
|
|
Wrap(
|
|
spacing: 12,
|
|
runSpacing: 12,
|
|
children: [
|
|
FilledButton(onPressed: () {}, child: const Text('Filled')),
|
|
ElevatedButton(onPressed: () {}, child: const Text('Elevated')),
|
|
OutlinedButton(onPressed: () {}, child: const Text('Outlined')),
|
|
TextButton(onPressed: () {}, child: const Text('Text')),
|
|
IconButton(onPressed: () {}, icon: const Icon(Icons.thumb_up)),
|
|
FloatingActionButton(
|
|
onPressed: () {},
|
|
child: const Icon(Icons.add),
|
|
),
|
|
],
|
|
),
|
|
|
|
const Divider(height: 32),
|
|
const Text('✅ 表单 & 状态类'),
|
|
const SizedBox(height: 12),
|
|
|
|
TextField(
|
|
decoration: const InputDecoration(labelText: '文本框'),
|
|
),
|
|
|
|
const SizedBox(height: 8),
|
|
Switch(
|
|
value: switchValue.value,
|
|
onChanged: (v) => switchValue.value = v,
|
|
),
|
|
Checkbox(
|
|
value: checkboxValue.value,
|
|
onChanged: (v) => checkboxValue.value = v ?? false,
|
|
),
|
|
Radio(
|
|
value: 1,
|
|
groupValue: radioValue.value,
|
|
onChanged: (v) => radioValue.value = v ?? 1,
|
|
),
|
|
Radio(
|
|
value: 2,
|
|
groupValue: radioValue.value,
|
|
onChanged: (v) => radioValue.value = v ?? 1,
|
|
),
|
|
DropdownMenu<String>(
|
|
initialSelection: dropdownValue.value,
|
|
onSelected: (v) => dropdownValue.value = v!,
|
|
dropdownMenuEntries: const [
|
|
DropdownMenuEntry(value: 'A', label: '选项 A'),
|
|
DropdownMenuEntry(value: 'B', label: '选项 B'),
|
|
],
|
|
),
|
|
|
|
const Divider(height: 32),
|
|
const Text('✅ 展示类组件'),
|
|
const Chip(label: Text('示例 Chip')),
|
|
const Tooltip(message: '我是提示', child: Icon(Icons.info)),
|
|
const Card(
|
|
child: Padding(
|
|
padding: EdgeInsets.all(12),
|
|
child: Text('这是一个卡片'),
|
|
),
|
|
),
|
|
const ListTile(
|
|
leading: Icon(Icons.person),
|
|
title: Text('列表项'),
|
|
subtitle: Text('副标题'),
|
|
trailing: Icon(Icons.arrow_forward_ios),
|
|
),
|
|
|
|
const Divider(height: 32),
|
|
const Text('✅ 进度组件'),
|
|
const SizedBox(height: 8),
|
|
const Center(
|
|
child: CircularProgressIndicator(),
|
|
),
|
|
const SizedBox(height: 8),
|
|
const LinearProgressIndicator(value: 0.6),
|
|
|
|
const Divider(height: 32),
|
|
const Text('✅ 导航与交互'),
|
|
Builder(
|
|
builder: (context) => ElevatedButton(
|
|
onPressed: () {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('被点击了')),
|
|
);
|
|
},
|
|
child: const Text('弹出 SnackBar'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|