一些常用场景
有校验功能的表单
官网文档:https://flutter.cn/docs/cookbook/forms/validation
dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyCustomForm(),
)
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
final myController = TextEditingController();
@override
void initState() {
super.initState();
myController.addListener(_printLatestValue);
}
void _printLatestValue() {
print('Second text field11: ${myController.text}');
}
@override
void dispose() {
myController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
controller: myController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
}
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Processing Data: ${myController.text}')),
);
}
},
child: const Text('Submit'),
)
)
]
)
);
}
}
事件响应函数中弹出dialog弹窗
dart
// 弹窗函数封装
void _alertDialog(BuildContext context) async {
var result = await showDialog(
barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return AlertDialog(
// backgroundColor: Colors.green,
icon: const Icon(Icons.home),
iconColor: Colors.green,
title: const Text("提示信息!"),
content: const Text("您确定要删除吗?"),
// contentTextStyle: const TextStyle(color: Colors.grey),
actions: <Widget>[
TextButton(
child: const Text("取消"),
onPressed: () {
Navigator.pop(context, 'Cancle');
},
),
TextButton(
child: const Text("确定"),
onPressed: () {
Navigator.pop(context, "Ok");
},
)
],
);
});
print('这里');
print(result);
}
// 弹窗函数使用
ElevatedButton(
onPressed: () async {
print('点击事件');
_alertDialog(context);
},
child: const Text('按钮')
)
// 带选择的dialog弹窗: SimpleDialog
void _simpleDialog(BuildContext context) async {
var result = await showDialog(
barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框
context: context,
builder: (context) {
return SimpleDialog(
title: const Text("请选择内容"),
children: <Widget>[
SimpleDialogOption(
child: const Text("Option A"),
onPressed: () {
Navigator.pop(context, "A");
},
),
const Divider(),
SimpleDialogOption(
child: const Text("Option B"),
onPressed: () {
Navigator.pop(context, "B");
},
),
const Divider(),
SimpleDialogOption(
child: const Text("Option C"),
onPressed: () {
Navigator.pop(context, "C");
},
),
],
);
});
print(result);
}
底部弹窗
dart
void _modelBottomSheet(BuildContext context) async {
var result = await showModalBottomSheet(
context: context,
builder: (context) {
return SizedBox(
height: 300,
child: Column(
children: [
const SizedBox(
height: 50,
child: Center(
child: Text("分享",style: TextStyle(fontSize: 30,color: Colors.black),),
),
),
const Divider(),
ListTile(
title: const Text("A"),
onTap: () {
Navigator.pop(context, "A");
},
),
const Divider(),
ListTile(
title: const Text("B"),
onTap: () {
Navigator.pop(context, "B");
},
),
const Divider(),
ListTile(
title: const Text("C"),
onTap: () {
Navigator.pop(context, "C");
},
),
const Divider(),
],
),
);
});
print(result);
}