Initial commit: Flutter 无书应用项目
This commit is contained in:
Developer
462
ohos/entry/src/main/ets/pages/WidgetSettings.ets
Normal file
462
ohos/entry/src/main/ets/pages/WidgetSettings.ets
Normal file
@@ -0,0 +1,462 @@
|
||||
import { router } from '@kit.ArkUI';
|
||||
import { preferences } from '@kit.ArkData';
|
||||
//todo 重要 后续 刷新按钮要求固定显示
|
||||
@Entry
|
||||
@Component
|
||||
struct WidgetSettings {
|
||||
@State selectedStyle: string = 'classic';
|
||||
@State showTime: boolean = true;
|
||||
@State showWeather: boolean = true;
|
||||
@State showQuote: boolean = true;
|
||||
@State quoteText: string = '床前明月光，疑是地上霜。';
|
||||
@State authorText: string = '李白《静夜思》';
|
||||
private preference: preferences.Preferences | null = null;
|
||||
|
||||
async aboutToAppear() {
|
||||
await this.loadSettings();
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
try {
|
||||
const context = getContext(this);
|
||||
this.preference = await preferences.getPreferences(context, 'widget_settings');
|
||||
this.selectedStyle = await this.preference.get('style', 'classic') as string;
|
||||
|
||||
const showTimeVal = await this.preference.get('showTime', true);
|
||||
this.showTime = Boolean(showTimeVal);
|
||||
console.info('[WidgetSettings] showTime raw value: ' + showTimeVal + ', type: ' + typeof showTimeVal + ', parsed: ' + this.showTime);
|
||||
|
||||
const showWeatherVal = await this.preference.get('showWeather', true);
|
||||
this.showWeather = Boolean(showWeatherVal);
|
||||
console.info('[WidgetSettings] showWeather raw value: ' + showWeatherVal + ', type: ' + typeof showWeatherVal + ', parsed: ' + this.showWeather);
|
||||
|
||||
const showQuoteVal = await this.preference.get('showQuote', true);
|
||||
this.showQuote = Boolean(showQuoteVal);
|
||||
|
||||
this.quoteText = await this.preference.get('quote', '床前明月光，疑是地上霜。') as string;
|
||||
this.authorText = await this.preference.get('author', '李白《静夜思》') as string;
|
||||
|
||||
console.info('[WidgetSettings] Settings loaded - showTime: ' + this.showTime + ', showWeather: ' + this.showWeather);
|
||||
} catch (error) {
|
||||
console.error('[WidgetSettings] loadSettings error: ' + JSON.stringify(error));
|
||||
}
|
||||
}
|
||||
|
||||
async saveSettings() {
|
||||
try {
|
||||
if (!this.preference) {
|
||||
const context = getContext(this);
|
||||
this.preference = await preferences.getPreferences(context, 'widget_settings');
|
||||
}
|
||||
console.info('[WidgetSettings] Saving settings - showTime: ' + this.showTime + ', showWeather: ' + this.showWeather);
|
||||
await this.preference.put('style', this.selectedStyle);
|
||||
await this.preference.put('showTime', Boolean(this.showTime));
|
||||
await this.preference.put('showWeather', Boolean(this.showWeather));
|
||||
await this.preference.put('showQuote', Boolean(this.showQuote));
|
||||
await this.preference.put('quote', this.quoteText);
|
||||
await this.preference.put('author', this.authorText);
|
||||
await this.preference.flush();
|
||||
console.info('[WidgetSettings] Settings saved successfully');
|
||||
} catch (error) {
|
||||
console.error('[WidgetSettings] saveSettings error: ' + JSON.stringify(error));
|
||||
}
|
||||
}
|
||||
|
||||
private isDarkText(): boolean {
|
||||
return this.selectedStyle === 'transparent' || this.selectedStyle === 'frosted' || this.selectedStyle === 'liquid' || this.selectedStyle === 'immersive';
|
||||
}
|
||||
|
||||
build() {
|
||||
Navigation() {
|
||||
Scroll() {
|
||||
Column({ space: 16 }) {
|
||||
Text('卡片设置')
|
||||
.fontSize(24)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontColor('#1A1A1A')
|
||||
.margin({ top: 16, bottom: 8 })
|
||||
|
||||
this.buildPreview()
|
||||
|
||||
this.buildStyleSelector()
|
||||
|
||||
this.buildDisplayOptions()
|
||||
|
||||
this.buildContentSettings()
|
||||
|
||||
Button('保存设置')
|
||||
.width('100%')
|
||||
.height(48)
|
||||
.fontSize(16)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.backgroundColor('#007AFF')
|
||||
.borderRadius(12)
|
||||
.margin({ top: 24, bottom: 32 })
|
||||
.onClick(() => {
|
||||
this.saveSettings();
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.padding(16)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
.title('卡片配置')
|
||||
.titleMode(NavigationTitleMode.Mini)
|
||||
.mode(NavigationMode.Stack)
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildPreview() {
|
||||
Column() {
|
||||
Text('预览')
|
||||
.fontSize(14)
|
||||
.fontColor('#666666')
|
||||
.margin({ bottom: 8 })
|
||||
.alignSelf(ItemAlign.Start)
|
||||
|
||||
if (this.selectedStyle === 'frosted') {
|
||||
this.buildPreviewCardFrosted()
|
||||
} else if (this.selectedStyle === 'liquid') {
|
||||
this.buildPreviewCardLiquid()
|
||||
} else if (this.selectedStyle === 'immersive') {
|
||||
this.buildPreviewCardImmersive()
|
||||
} else if (this.selectedStyle === 'transparent') {
|
||||
this.buildPreviewCardTransparent()
|
||||
} else {
|
||||
this.buildPreviewCardGradient()
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.padding(16)
|
||||
.backgroundColor('#F5F5F5')
|
||||
.borderRadius(12)
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildPreviewCardFrosted() {
|
||||
Column() {
|
||||
this.buildPreviewCardContent()
|
||||
}
|
||||
.width('100%')
|
||||
.height(160)
|
||||
.padding(16)
|
||||
.borderRadius(16)
|
||||
.backgroundColor('rgba(255,255,255,0.25)')
|
||||
.backdropBlur(20)
|
||||
.border({
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.4)'
|
||||
})
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildPreviewCardLiquid() {
|
||||
Column() {
|
||||
this.buildPreviewCardContent()
|
||||
}
|
||||
.width('100%')
|
||||
.height(160)
|
||||
.padding(16)
|
||||
.borderRadius(16)
|
||||
.linearGradient({
|
||||
angle: 135,
|
||||
colors: [['rgba(100,181,246,0.6)', 0.0], ['rgba(255,255,255,0.3)', 0.5], ['rgba(255,138,128,0.4)', 1.0]]
|
||||
})
|
||||
.backdropBlur(15)
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildPreviewCardImmersive() {
|
||||
Column() {
|
||||
this.buildPreviewCardContent()
|
||||
}
|
||||
.width('100%')
|
||||
.height(160)
|
||||
.padding(16)
|
||||
.borderRadius(16)
|
||||
.linearGradient({
|
||||
angle: 180,
|
||||
colors: [['rgba(0,0,0,0.4)', 0.0], ['rgba(0,0,0,0.1)', 0.5], ['rgba(0,0,0,0.3)', 1.0]]
|
||||
})
|
||||
.backdropBlur(10)
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildPreviewCardTransparent() {
|
||||
Column() {
|
||||
this.buildPreviewCardContent()
|
||||
}
|
||||
.width('100%')
|
||||
.height(160)
|
||||
.padding(16)
|
||||
.borderRadius(16)
|
||||
.backgroundColor('transparent')
|
||||
.border({
|
||||
width: 1,
|
||||
color: '#E0E0E0',
|
||||
style: BorderStyle.Dashed
|
||||
})
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildPreviewCardGradient() {
|
||||
Column() {
|
||||
this.buildPreviewCardContent()
|
||||
}
|
||||
.width('100%')
|
||||
.height(160)
|
||||
.padding(16)
|
||||
.borderRadius(16)
|
||||
.linearGradient({
|
||||
angle: 135,
|
||||
colors: this.getGradientColors()
|
||||
})
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildPreviewCardContent() {
|
||||
if (this.showTime) {
|
||||
Row() {
|
||||
Text('12:00')
|
||||
.fontSize(15)
|
||||
.fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
|
||||
.fontWeight(FontWeight.Bold)
|
||||
}
|
||||
.width('100%')
|
||||
.justifyContent(FlexAlign.End)
|
||||
}
|
||||
|
||||
if (this.showQuote) {
|
||||
Column() {
|
||||
Text(this.quoteText)
|
||||
.fontSize(18)
|
||||
.fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.margin({ bottom: 4 })
|
||||
Text(this.authorText)
|
||||
.fontSize(14)
|
||||
.fontColor(this.isDarkText() ? '#666666' : '#FFFFFFCC')
|
||||
.fontWeight(FontWeight.Medium)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.margin({ top: 12, bottom: 12 })
|
||||
}
|
||||
|
||||
if (this.showWeather) {
|
||||
Row() {
|
||||
Text('☀️')
|
||||
.fontSize(18)
|
||||
Text('25°C')
|
||||
.fontSize(15)
|
||||
.fontColor(this.isDarkText() ? '#1A1A1A' : '#FFFFFF')
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.margin({ left: 4 })
|
||||
}
|
||||
.width('100%')
|
||||
.justifyContent(FlexAlign.End)
|
||||
}
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildStyleSelector() {
|
||||
Column({ space: 12 }) {
|
||||
Text('卡片样式')
|
||||
.fontSize(16)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor('#1A1A1A')
|
||||
.alignSelf(ItemAlign.Start)
|
||||
|
||||
Column({ space: 8 }) {
|
||||
Row({ space: 8 }) {
|
||||
this.buildStyleOption('classic', '经典', ['#7B1FA2', '#9C27B0'], 'gradient')
|
||||
this.buildStyleOption('modern', '护眼', ['#2E7D32', '#4CAF50'], 'gradient')
|
||||
this.buildStyleOption('minimal', '极简', ['#424242', '#757575'], 'gradient')
|
||||
this.buildStyleOption('elegant', '优雅', ['#FF6B6B', '#FF8E53'], 'gradient')
|
||||
}
|
||||
.width('100%')
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
|
||||
Row({ space: 8 }) {
|
||||
this.buildStyleOption('frosted', '毛玻璃', ['rgba(255,255,255,0.25)', 'rgba(255,255,255,0.1)'], 'frosted')
|
||||
this.buildStyleOption('liquid', '柔光', ['rgba(100,181,246,0.4)', 'rgba(255,255,255,0.2)'], 'liquid')
|
||||
this.buildStyleOption('immersive', '沉浸式', ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.1)'], 'immersive')
|
||||
this.buildStyleOption('transparent', '纯白', ['transparent', 'transparent'], 'transparent')
|
||||
}
|
||||
.width('100%')
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.padding(16)
|
||||
.backgroundColor('#F5F5F5')
|
||||
.borderRadius(12)
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildStyleOption(style: string, label: string, colors: string[], type: string) {
|
||||
Column() {
|
||||
if (type === 'frosted') {
|
||||
Column()
|
||||
.width(40)
|
||||
.height(40)
|
||||
.borderRadius(20)
|
||||
.backgroundColor('rgba(0,0,0,0.3)')
|
||||
.backdropBlur(20)
|
||||
.border({
|
||||
width: 1,
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
})
|
||||
} else if (type === 'liquid') {
|
||||
Column()
|
||||
.width(40)
|
||||
.height(40)
|
||||
.borderRadius(20)
|
||||
.linearGradient({
|
||||
angle: 135,
|
||||
colors: [['rgba(100,181,246,0.6)', 0.0], ['rgba(255,255,255,0.3)', 0.5], ['rgba(255,138,128,0.4)', 1.0]]
|
||||
})
|
||||
.backdropBlur(15)
|
||||
} else if (type === 'immersive') {
|
||||
Column()
|
||||
.width(40)
|
||||
.height(40)
|
||||
.borderRadius(20)
|
||||
.linearGradient({
|
||||
angle: 180,
|
||||
colors: [['rgba(0,0,0,0.4)', 0.0], ['rgba(0,0,0,0.1)', 0.5], ['rgba(0,0,0,0.3)', 1.0]]
|
||||
})
|
||||
.backdropBlur(10)
|
||||
} else if (type === 'transparent') {
|
||||
Column()
|
||||
.width(40)
|
||||
.height(40)
|
||||
.borderRadius(20)
|
||||
.border({
|
||||
width: 2,
|
||||
color: '#E0E0E0',
|
||||
style: BorderStyle.Dashed
|
||||
})
|
||||
} else {
|
||||
Column()
|
||||
.width(40)
|
||||
.height(40)
|
||||
.borderRadius(20)
|
||||
.linearGradient({
|
||||
angle: 135,
|
||||
colors: [[colors[0], 0.0], [colors[1], 1.0]]
|
||||
})
|
||||
}
|
||||
|
||||
Text(label)
|
||||
.fontSize(12)
|
||||
.fontColor(this.selectedStyle === style ? '#007AFF' : '#666666')
|
||||
.margin({ top: 4 })
|
||||
}
|
||||
.padding(8)
|
||||
.borderRadius(12)
|
||||
.border({
|
||||
width: this.selectedStyle === style ? 2 : 0,
|
||||
color: '#007AFF'
|
||||
})
|
||||
.backgroundColor(this.selectedStyle === style ? '#E3F2FD' : 'transparent')
|
||||
.onClick(() => {
|
||||
this.selectedStyle = style;
|
||||
})
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildDisplayOptions() {
|
||||
Column({ space: 12 }) {
|
||||
Text('显示选项（内测功能）')
|
||||
.fontSize(16)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor('#1A1A1A')
|
||||
.alignSelf(ItemAlign.Start)
|
||||
|
||||
this.buildToggle('显示时间', this.showTime, (value) => { this.showTime = value; })
|
||||
this.buildToggle('显示天气', this.showWeather, (value) => { this.showWeather = value; })
|
||||
this.buildToggle('显示诗词', this.showQuote, (value) => { this.showQuote = value; })
|
||||
}
|
||||
.width('100%')
|
||||
.padding(16)
|
||||
.backgroundColor('#F5F5F5')
|
||||
.borderRadius(12)
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildToggle(label: string, value: boolean, onChange: (value: boolean) => void) {
|
||||
Row() {
|
||||
Text(label)
|
||||
.fontSize(14)
|
||||
.fontColor('#1A1A1A')
|
||||
|
||||
Toggle({ type: ToggleType.Switch, isOn: value })
|
||||
.selectedColor('#007AFF')
|
||||
.onChange(onChange)
|
||||
}
|
||||
.width('100%')
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
}
|
||||
|
||||
@Builder
|
||||
buildContentSettings() {
|
||||
Column({ space: 12 }) {
|
||||
Text('内容设置')
|
||||
.fontSize(16)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor('#1A1A1A')
|
||||
.alignSelf(ItemAlign.Start)
|
||||
|
||||
Column({ space: 8 }) {
|
||||
Text('诗词内容')
|
||||
.fontSize(14)
|
||||
.fontColor('#666666')
|
||||
.alignSelf(ItemAlign.Start)
|
||||
|
||||
TextArea({ text: $$this.quoteText })
|
||||
.width('100%')
|
||||
.height(80)
|
||||
.fontSize(14)
|
||||
.backgroundColor('#FFFFFF')
|
||||
.borderRadius(8)
|
||||
.padding(12)
|
||||
}
|
||||
|
||||
Column({ space: 8 }) {
|
||||
Text('作者信息')
|
||||
.fontSize(14)
|
||||
.fontColor('#666666')
|
||||
.alignSelf(ItemAlign.Start)
|
||||
|
||||
TextInput({ text: $$this.authorText })
|
||||
.width('100%')
|
||||
.height(44)
|
||||
.fontSize(14)
|
||||
.backgroundColor('#FFFFFF')
|
||||
.borderRadius(8)
|
||||
.padding({ left: 12, right: 12 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.padding(16)
|
||||
.backgroundColor('#F5F5F5')
|
||||
.borderRadius(12)
|
||||
}
|
||||
|
||||
getGradientColors(): Array<[ResourceColor, number]> {
|
||||
switch (this.selectedStyle) {
|
||||
case 'classic':
|
||||
return [['#7B1FA2', 0.0], ['#9C27B0', 1.0]];
|
||||
case 'modern':
|
||||
return [['#2E7D32', 0.0], ['#4CAF50', 1.0]];
|
||||
case 'minimal':
|
||||
return [['#424242', 0.0], ['#757575', 1.0]];
|
||||
case 'elegant':
|
||||
return [['#FF6B6B', 0.0], ['#FF8E53', 1.0]];
|
||||
default:
|
||||
return [['#7B1FA2', 0.0], ['#9C27B0', 1.0]];
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user