Flutter 自定義日曆元件

2021-10-03 09:36:32 字數 4351 閱讀 1260

顏色檔案和螢幕適配的檔案 可以自己給定

import

'package:flutter/cupertino.dart'

;import

'package:flutter/rendering.dart'

;import

'package:flutter_xiaoe/utils/screenutil.dart'

;import

'package:flutter/material.dart'

;import

'package:flutter_xiaoe/utils/timeutil.dart'

;import

'package:flutter_xiaoe/widgets/common/calendar/daygridview.dart'

;import

'package:flutter_xiaoe/config/colors.dart'

;class calendar extends statefulwidget

): super(key: key)

; @override

state createstate()=

> _calendarstate();

}class _calendarstate extends state

onchange(time));

}} @override

widget build(buildcontext context) ,

itemcount: totalpage,

controller: pagecontroller,

),),

]);}}

import

'package:flutter/cupertino.dart'

;import

'package:flutter/rendering.dart'

;import

'package:flutter_xiaoe/utils/screenutil.dart'

;import

'package:flutter_xiaoe/utils/netutil.dart'

;import

'package:flutter_xiaoe/config/api.dart'

;import

'package:flutter_xiaoe/config/colors.dart'

;import

'package:flutter/material.dart'

;import

'dart:math' as math;

import

'package:flutter_xiaoe/utils/timeutil.dart'

;class daygridview extends statefulwidget );

@override

state createstate()=

> _daygridviewstate();

}class _daygridviewstate extends state

list dayitems(

) if (value == widget.selectdate) ,

child: container(

alignment: alignment.center,

child: container(

width: screenutil.px2pt(60)

, height: screenutil.px2pt(60)

, alignment: alignment.center,

decoration: boxdecoration(

borderradius: borderradius.all(radius.circular(

100))

, ),

child: text(

value.day.tostring(

), ),

),),

);}else

, child: container(

alignment: alignment.center,

child: text(

value.day.tostring(

), )),

);}else

else

, child: container(

alignment: alignment.center,

child: container(

child: text(

value.day.tostring(

), ),

)),);}

}}}).tolist();

return daywidgets;

} @override

widget build(buildcontext context)

}/// 自定義gridview

class _daypickergriddelegate extends slivergriddelegate );

@override

slivergridlayout getlayout(sliverconstraints constraints)

@override

bool shouldrelayout(_daypickergriddelegate olddelegate)

=>

false;}

const _daypickergriddelegate _kdaypickergriddelegate = _daypickergriddelegate(

);

import

'package:flutter/cupertino.dart'

;import

'package:flutter_xiaoe/utils/screenutil.dart'

;import

'package:flutter_xiaoe/utils/netutil.dart'

;import

'package:flutter_xiaoe/config/api.dart'

;import

'package:flutter_xiaoe/config/colors.dart'

;import

'package:flutter/material.dart'

;import

'package:flutter_xiaoe/widgets/login/imageinputwidget.dart'

;import

'package:flutter_xiaoe/config/constant.dart'

;import

'package:flutter_xiaoe/config/imageconfig.dart'

;import

'package:flutter_xiaoe/widgets/common/shadowcontainer.dart'

;import

'package:flutter_xiaoe/widgets/login/gradientbutton.dart'

;import

'package:flutter_xiaoe/widgets/common/header.dart'

;class timeutil

return _daysinmonth[month-1];}

/// 獲取周header

static list getdayheaders(materiallocalizations localizations)

return list;

} /// 得到這個月的第一天是星期幾(0 是 星期日 1 是 星期一...)

static int computefirstdayoffset(

int year, int month, materiallocalizations localizations)

/// 獲取天

static list getday(int year, int month, materiallocalizations localizations)

else

}return labels;

}}

react 自定義日曆元件

基於hooks開發的自定義日曆元件,可以根據自己需要修改 params searchbar 搜尋引數 列表資料 description 修改請備註 location grey const main props 獲取當前年份 const getfullyear date date number con...

vue自定義日曆元件(完美)

廢話不多說,直接上 created methods 選擇天 changeday day,index this.day idx index 獲取兩個時間段之間的年月 getmonthbetween start,end this.months.push str curr.setmonth month 1...

flutter 自定義輸入框元件

一 元件分析 ui如下 根據ui分析我們需要提取哪些是動態的,可以通過傳遞引數得到不同的結果?1.左側icon 2.輸入的文字 3.是否是密碼框 4.輸入框的控制器 如何時時得到輸入框的值 二 快速建立自定義元件 vscode中使用快捷鍵stl快速生成乙個無狀態元件,為什麼這裡使用的是乙個無狀態元件...