calendar - 有人可以用框架或其他东西帮助我在 flutter 中实现这种类型的日历小部件吗

Question

我想显示日历而不是对话框。我希望能够像屏幕截图中那样选择日期间隔。

Answer 1

我建议您不要重新发明轮子并选择一个社区日历小部件(如 that one )，但如果您需要自定义解决方案，您可以从非常简单的事情开始。例如，如果您需要选择一个范围，您可能只需要一个网格和几个这样的按钮:

import 'package:flutter/material.dart';

class CalendarPage extends StatefulWidget {
  final String title;

  CalendarPage({Key key, this.title}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  int _left = -1;
  int _right = -1;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: GridView.count(
        crossAxisCount: 7,
        children: List.generate(31, (index) {
          return Container(
              decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: Colors.black38),
                color: _isInBounds(index)
                    ? Colors.yellow[100]
                    : Colors.transparent,
                borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
              ),
              margin: const EdgeInsets.all(2.0),
              child: FlatButton(
                onPressed: () => _handleTap(index),
                child: Text('${index + 1}',
                    style: Theme.of(context).textTheme.body2,
                    textAlign: TextAlign.center)));
        }),
       ));
  }

  void _handleTap(index) {
    setState(() {
      if (_left == -1)
        _left = index;
      else if (_right == -1) _right = index;
    });
  }

  bool _isInBounds(int index) => _left <= index && index <= _right;
}