dart 如何在Flutter中构建此布局/UI？

5vf7fwbs 于 2022-12-06 发布在 Flutter

关注(0)|答案(1)|浏览(179)

我正在尝试为我的应用程序制作一个日历，虽然我可以只使用插件，但我选择不使用，我决定自己实现它。我选择了这种方法：我有一个从周一到周日的文本小部件列表

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

接下来，我列出了所有工作日的列表

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

 // and so on

现在，i this有一个方法，该方法循环遍历给定月份中的所有日期，并将星期几存储在它们各自的列表中。即，它会将1存储在wed列表中，将2存储在thurs列表中（对于本月），如下所示：

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())));

      }



    }

  }

所以我想实现的布局是这样的：基本上，我希望显示工作日，如星期一、星期二、星期三等，在每个日期下面，我希望显示工作日列表（如list mon），如下所示：太阳
五个
12
19 ......以此类推。这是

的草图

dart

来源：https://stackoverflow.com/questions/59842498/how-do-i-build-this-layout-ui-in-flutter

1条答案

按热度按时间

hk8txs481#

你可以使用Gridview.builder（）来创建你上面描述的UI。下面是为你处理所有工作的代码片段，比如处理闰年等等。

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;
  }
}

赞(0）回复(0）举报 2022-12-06

我来回答

dart 如何在Flutter中构建此布局/UI？

1条答案

相关问题

热门标签

最新问答