Skip to content
On this page

一些常用场景

有校验功能的表单

官网文档: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);
}