如何在Flutter中构建此布局/ UI？ [英] How do I build this layout/UI in flutter?

问题描述

我正在尝试为此应用创建日历，尽管我只能使用插件，但我选择不这样做，因此我决定自己实现。我选择了这种方法：我有一个从星期一到星期日的文本小部件列表。

I am trying to make a calendar for my app and for this,and while I can just use a plugin, i've chosen not to, and I decided to implement it myself. I've chosen this approach: I have a list of text widgets that go from Monday to Sunday

    List<Widget> days = [
  Text("Sun"),Text("Mon")....Text("Sat")
];

接下来，我有几个工作日的列表

Next, I have several lists of all the weekdays

    List<Widget> mon = []; 
    List<Widget> tue = [];

 // and so on

现在，我有循环的方法遍历给定月份中的所有天，并将工作日存储在各自的列表中。即，它将在星期三列表中存储1，在星期四列表中存储2（对于本月），如下所示：

Now, i this have method that loops through all the days in the given month, and stores the week days in their respective list. i.e,it would store 1 in wed list, 2 in thurs list (for this month) like so:

void populateCalendar(){
    final dateToday =  DateTime.now();
    final DateTime lastDay = Utils.lastDayOfMonth(dateToday);


    for(int i=1;i<=lastDay.day;i++){
      var date = new DateTime.utc(dateToday.year,dateToday.month,i);

      if(date.weekday == 1){
        mon.add(FlatButton(onPressed: null, child: Text(date.day.toString())));

      }
      else if(date.weekday == 2){
        tue.add(FlatButton(onPressed: null, child: Text(date.day.toString())));

      }

      else if(date.weekday == 3){
        wed.add(FlatButton(onPressed: null, child: Text(date.day.toString())));

      }
      else if(date.weekday == 4){
        thur.add(FlatButton(onPressed: null, child: Text(date.day.toString())));

      }
      else if(date.weekday == 5){
        fri.add(FlatButton(onPressed: null, child: Text(date.day.toString())));

      }
      else if(date.weekday == 6){
        sat.add(FlatButton(onPressed: null, child: Text(date.day.toString())));

      }
      else if(date.weekday == 7){
        sun.add(FlatButton(onPressed: null, child: Text(date.day.toString())));

      }




    }

  }

所以我想要实现的布局是这样的：基本上，我想显示工作日，如Sun Mon Tues Wed等，并在每个日期下方显示，我想这样显示工作日列表（例如list mon）：Sun
5

12
19 ..以此类推。这是一个粗略的草图

So the layout i want to achieve is like this: basically i want to display the weekdays like Sun Mon Tues Wed and so on, and underneath each date, i would like to display the list of weekday(like list mon) like this: Sun
5
12
19 .. and so on. Here's a rough sketch

推荐答案

您可以使用Gridview。 builder（）创建如上所述的UI。
这是将为您处理所有工作的代码段，例如处理leap年等。

You can use Gridview.builder() to create the UI as you described above. Here is the code snippet that will handle all work for you, like handling leap year etc.

class BuildCalender extends StatelessWidget {
  final month = DateTime.now().month;
  final day = DateTime.now().day;
  final year = DateTime.now().year;
  final days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  @override
  Widget build(BuildContext context) {
    final start = difference();
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text('Sun'),
            Text('Mon'),
            Text('Tue'),
            Text('Wed'),
            Text('Thu'),
            Text('Fri'),
            Text('Sat'),
          ],
        ),
        Container(
          child: GridView.builder(
            shrinkWrap: true,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 7),
            itemBuilder: (context, index) {
              if (index < start) {
                return Container();
              }
              return Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.0),
                    color: Colors.white,
                    border: Border.all(color: Colors.grey.withOpacity(0.4))),
                child: Text('${index + 1 - start}'),
              );
            },
            itemCount: (month == 2
                    ? checkYear(year) ? days[month - 1] + 1 : days[month - 1]
                    : days[month - 1]) +
                start,
          ),
        ),
      ],
    );
  }

  int difference() {
    String date = DateTime.now().toString();
    String firstDay = date.substring(0, 7) + '01' + date.substring(10);
    int weekDay = DateTime.parse(firstDay).weekday;
    if (weekDay == 7) {
      return 0;
    }
    return weekDay;
  }

  bool checkYear(int year) {
    if (year % 400 == 0) return true;
    if (year % 100 == 0) return false;
    if (year % 4 == 0) return true;
    return false;
  }
}

这篇关于如何在Flutter中构建此布局/ UI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！