开发人员必备：亲手打造功能强大的Flutter日记应用程序之四

iOS

2023-12-18 14:55:19

Flutter 日记应用程序开发之旅：添加日记本篇

欢迎回到我们的 Flutter 日记应用程序开发之旅，上篇教程中，我们构建了一个功能强大的日记应用程序，涵盖了基本的日记记录功能。今天，我们将更进一步，重点关注添加新日记本的功能，让您的用户能够更好地组织他们的日记。

自定义开关按钮组件

为了轻松实现循环提醒，我们创建了一个自定义的开关按钮组件。这个组件负责处理用户对循环提醒的切换操作，您可以根据需要定制它的外观和行为。

循环提醒选项

在创建日记时，用户可以设置循环提醒。这个功能允许他们选择在特定间隔内重复收到提醒，例如每天、每周或每月。通过提供这些选项，用户可以根据自己的日程安排定制他们的提醒，确保他们永远不会错过重要的日记条目。

添加日记本

最后，我们将实现添加新日记本的功能。这个功能允许用户创建多个日记本，以更好地组织他们的日记。日记本可以按主题、时间段或任何其他相关标准分类，从而为用户提供一个有效且可定制的日记记录体验。

代码示例

以下是实现上述功能的一些代码示例：

CustomSwitch.dart

import 'package:flutter/material.dart';

class CustomSwitch extends StatefulWidget {
  final bool value;
  final Function(bool) onChanged;

  const CustomSwitch({
    Key key,
    this.value,
    this.onChanged,
  }) : super(key: key);

  @override
  _CustomSwitchState createState() => _CustomSwitchState();
}

class _CustomSwitchState extends State<CustomSwitch> {
  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: 0.7,
      child: Switch(
        value: widget.value,
        onChanged: (value) {
          widget.onChanged(value);
        },
      ),
    );
  }
}

RepeatOptions.dart

import 'package:flutter/material.dart';

class RepeatOptions extends StatefulWidget {
  final Function(int) onChanged;

  const RepeatOptions({
    Key key,
    this.onChanged,
  }) : super(key: key);

  @override
  _RepeatOptionsState createState() => _RepeatOptionsState();
}

class _RepeatOptionsState extends State<RepeatOptions> {
  int _selectedOption = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('循环提醒：'),
        Row(
          children: [
            Radio(
              value: 0,
              groupValue: _selectedOption,
              onChanged: (value) {
                setState(() {
                  _selectedOption = value;
                  widget.onChanged(value);
                });
              },
            ),
            Text('每天'),
            Radio(
              value: 1,
              groupValue: _selectedOption,
              onChanged: (value) {
                setState(() {
                  _selectedOption = value;
                  widget.onChanged(value);
                });
              },
            ),
            Text('每周'),
            Radio(
              value: 2,
              groupValue: _selectedOption,
              onChanged: (value) {
                setState(() {
                  _selectedOption = value;
                  widget.onChanged(value);
                });
              },
            ),
            Text('每月'),
          ],
        ),
      ],
    );
  }
}

AddDiaryForm.dart

import 'package:flutter/material.dart';
import 'package:diary_app/models/diary.dart';

class AddDiaryForm extends StatefulWidget {
  final Function(Diary) onSubmit;

  const AddDiaryForm({
    Key key,
    this.onSubmit,
  }) : super(key: key);

  @override
  _AddDiaryFormState createState() => _AddDiaryFormState();
}

class _AddDiaryFormState extends State<AddDiaryForm> {
  final _formKey = GlobalKey<FormState>();
  final _titleController = TextEditingController();
  final _descriptionController = TextEditingController();
  bool _isRepeat = false;
  int _repeatOption = 0;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: _titleController,
            decoration: InputDecoration(
              labelText: '            ),
            validator: (value) {
              if (value.isEmpty) {
                return '请输入标题';
              }
              return null;
            },
          ),
          TextFormField(
            controller: _descriptionController,
            decoration: InputDecoration(
              labelText: ''
            ),
          ),
          RepeatOptions(
            onChanged: (value) {
              setState(() {
                _isRepeat = value != 0;
                _repeatOption = value;
              });
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                Diary diary = Diary(
                  title: _titleController.text,
                  description: _descriptionController.text,
                  isRepeat: _isRepeat,
                  repeatOption: _repeatOption,
                );
                widget.onSubmit(diary);
                Navigator.pop(context);
              }
            },
            child: Text('添加'),
          ),
        ],
      ),
    );
  }
}