diff --git a/.gradle/3.5.1/file-changes/last-build.bin b/.gradle/3.5.1/file-changes/last-build.bin new file mode 100644 index 00000000..f76dd238 Binary files /dev/null and b/.gradle/3.5.1/file-changes/last-build.bin differ diff --git a/.gradle/3.5.1/taskHistory/taskHistory.lock b/.gradle/3.5.1/taskHistory/taskHistory.lock new file mode 100644 index 00000000..1a1ada52 Binary files /dev/null and b/.gradle/3.5.1/taskHistory/taskHistory.lock differ diff --git a/.gradle/buildOutputCleanup/built.bin b/.gradle/buildOutputCleanup/built.bin new file mode 100644 index 00000000..e69de29b diff --git a/.gradle/buildOutputCleanup/cache.properties b/.gradle/buildOutputCleanup/cache.properties new file mode 100644 index 00000000..061d565e --- /dev/null +++ b/.gradle/buildOutputCleanup/cache.properties @@ -0,0 +1,2 @@ +#Thu Nov 22 22:29:42 CST 2018 +gradle.version=3.5.1 diff --git a/.gradle/buildOutputCleanup/cache.properties.lock b/.gradle/buildOutputCleanup/cache.properties.lock new file mode 100644 index 00000000..40fdece9 --- /dev/null +++ b/.gradle/buildOutputCleanup/cache.properties.lock @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..bbfd110a --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,13 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Flutter", + "request": "launch", + "type": "dart" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..9a7349a6 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.fontSize": 14, + +} \ No newline at end of file diff --git a/assets/app.db b/assets/app.db index dd287592..730461b2 100644 Binary files a/assets/app.db and b/assets/app.db differ diff --git a/assets/images/btn_icon_dingyuehao_normal.png b/assets/images/btn_icon_dingyuehao_normal.png new file mode 100644 index 00000000..669f76fe Binary files /dev/null and b/assets/images/btn_icon_dingyuehao_normal.png differ diff --git a/assets/images/food01.jpeg b/assets/images/food01.jpeg new file mode 100644 index 00000000..da111751 Binary files /dev/null and b/assets/images/food01.jpeg differ diff --git a/assets/images/food02.jpeg b/assets/images/food02.jpeg new file mode 100644 index 00000000..7bb62d17 Binary files /dev/null and b/assets/images/food02.jpeg differ diff --git a/assets/images/food03.jpeg b/assets/images/food03.jpeg new file mode 100644 index 00000000..e806712b Binary files /dev/null and b/assets/images/food03.jpeg differ diff --git a/assets/images/food04.jpeg b/assets/images/food04.jpeg new file mode 100644 index 00000000..95d03802 Binary files /dev/null and b/assets/images/food04.jpeg differ diff --git a/assets/images/food05.jpeg b/assets/images/food05.jpeg new file mode 100644 index 00000000..6de19c69 Binary files /dev/null and b/assets/images/food05.jpeg differ diff --git a/assets/images/food06.jpeg b/assets/images/food06.jpeg new file mode 100644 index 00000000..53ce675c Binary files /dev/null and b/assets/images/food06.jpeg differ diff --git a/assets/images/normal_user_icon.png b/assets/images/normal_user_icon.png new file mode 100644 index 00000000..be30d9c1 Binary files /dev/null and b/assets/images/normal_user_icon.png differ diff --git a/assets/images/paimaiLogo.png b/assets/images/paimaiLogo.png new file mode 100644 index 00000000..0df24bcf Binary files /dev/null and b/assets/images/paimaiLogo.png differ diff --git a/assets/images/timg.jpeg b/assets/images/timg.jpeg new file mode 100644 index 00000000..418bbc7c Binary files /dev/null and b/assets/images/timg.jpeg differ diff --git a/docs/Screenshot_20181121-170331_Samsung Notes.jpg b/docs/Screenshot_20181121-170331_Samsung Notes.jpg new file mode 100644 index 00000000..fbff9a55 Binary files /dev/null and b/docs/Screenshot_20181121-170331_Samsung Notes.jpg differ diff --git a/docs/jiegou.png b/docs/jiegou.png new file mode 100644 index 00000000..2de8a842 Binary files /dev/null and b/docs/jiegou.png differ diff --git a/lib/common/Style.dart b/lib/common/Style.dart index e3f080ef..31d9bb8d 100644 --- a/lib/common/Style.dart +++ b/lib/common/Style.dart @@ -20,4 +20,10 @@ class AppText{ color: Color(AppColor.subTextColor), fontSize: middleSize, ); -} \ No newline at end of file +} +class WidgetDemoColor { + static const int fontColor = 0xFF607173; + static const int iconColor = 0xFF607173; + static const int borderColor = 0xFFEFEFEF; + +} diff --git a/lib/common/high_light_code.dart b/lib/common/high_light_code.dart new file mode 100644 index 00000000..1ac0fdcd --- /dev/null +++ b/lib/common/high_light_code.dart @@ -0,0 +1,359 @@ +// Copyright 2016 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'package:flutter/material.dart'; +import 'package:string_scanner/string_scanner.dart'; + +/// final SyntaxHighlighterStyle style = SyntaxHighlighterStyle.lightThemeStyle(); +/// DartSyntaxHighlighter(style).format(source) + +class SyntaxHighlighterStyle { + SyntaxHighlighterStyle({ + this.baseStyle, + this.numberStyle, + this.commentStyle, + this.keywordStyle, + this.stringStyle, + this.punctuationStyle, + this.classStyle, + this.constantStyle + }); + + static SyntaxHighlighterStyle lightThemeStyle() { + return SyntaxHighlighterStyle( + baseStyle: const TextStyle(color: Color(0xFF000000)), + numberStyle: const TextStyle(color: Color(0xFF1565C0)), + commentStyle: const TextStyle(color: Color(0xFF9E9E9E)), + keywordStyle: const TextStyle(color: Color(0xFF9C27B0)), + stringStyle: const TextStyle(color: Color(0xFF43A047)), + punctuationStyle: const TextStyle(color: Color(0xFF000000)), + classStyle: const TextStyle(color: Color(0xFF512DA8)), + constantStyle: const TextStyle(color: Color(0xFF795548)) + ); + } + + static SyntaxHighlighterStyle darkThemeStyle() { + return SyntaxHighlighterStyle( + baseStyle: const TextStyle(color: Color(0xFFFFFFFF)), + numberStyle: const TextStyle(color: Color(0xFF1565C0)), + commentStyle: const TextStyle(color: Color(0xFF9E9E9E)), + keywordStyle: const TextStyle(color: Color(0xFF80CBC4)), + stringStyle: const TextStyle(color: Color(0xFF009688)), + punctuationStyle: const TextStyle(color: Color(0xFFFFFFFF)), + classStyle: const TextStyle(color: Color(0xFF009688)), + constantStyle: const TextStyle(color: Color(0xFF795548)) + ); + } + + final TextStyle baseStyle; + final TextStyle numberStyle; + final TextStyle commentStyle; + final TextStyle keywordStyle; + final TextStyle stringStyle; + final TextStyle punctuationStyle; + final TextStyle classStyle; + final TextStyle constantStyle; +} + +abstract class Highlighter { // ignore: one_member_abstracts + TextSpan format(String src); +} + +class DartSyntaxHighlighter extends Highlighter { + DartSyntaxHighlighter([this._style]) { + _spans = <_HighlightSpan>[]; + _style ??= SyntaxHighlighterStyle.darkThemeStyle(); + } + + SyntaxHighlighterStyle _style; + + static const List _keywords = [ + 'abstract', 'as', 'assert', 'async', 'await', 'break', 'case', 'catch', + 'class', 'const', 'continue', 'default', 'deferred', 'do', 'dynamic', 'else', + 'enum', 'export', 'external', 'extends', 'factory', 'false', 'final', + 'finally', 'for', 'get', 'if', 'implements', 'import', 'in', 'is', 'library', + 'new', 'null', 'operator', 'part', 'rethrow', 'return', 'set', 'static', + 'super', 'switch', 'sync', 'this', 'throw', 'true', 'try', 'typedef', 'var', + 'void', 'while', 'with', 'yield' + ]; + + static const List _builtInTypes = [ + 'int', 'double', 'num', 'bool' + ]; + + String _src; + StringScanner _scanner; + + List<_HighlightSpan> _spans; + + @override + TextSpan format(String src) { + _src = src; + _scanner = StringScanner(_src); + + if (_generateSpans()) { + // Successfully parsed the code + final List formattedText = []; + int currentPosition = 0; + + for (_HighlightSpan span in _spans) { + if (currentPosition != span.start) + formattedText.add(TextSpan(text: _src.substring(currentPosition, span.start))); + + formattedText.add(TextSpan(style: span.textStyle(_style), text: span.textForSpan(_src))); + + currentPosition = span.end; + } + + if (currentPosition != _src.length) + formattedText.add(TextSpan(text: _src.substring(currentPosition, _src.length))); + + return TextSpan(style: _style.baseStyle, children: formattedText); + } else { + // Parsing failed, return with only basic formatting + return TextSpan(style: _style.baseStyle, text: src); + } + } + + bool _generateSpans() { + int lastLoopPosition = _scanner.position; + + while (!_scanner.isDone) { + // Skip White space + _scanner.scan(RegExp(r'\s+')); + + // Block comments + if (_scanner.scan(RegExp(r'/\*(.|\n)*\*/'))) { + _spans.add(_HighlightSpan( + _HighlightType.comment, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Line comments + if (_scanner.scan('//')) { + final int startComment = _scanner.lastMatch.start; + + bool eof = false; + int endComment; + if (_scanner.scan(RegExp(r'.*\n'))) { + endComment = _scanner.lastMatch.end - 1; + } else { + eof = true; + endComment = _src.length; + } + + _spans.add(_HighlightSpan( + _HighlightType.comment, + startComment, + endComment + )); + + if (eof) + break; + + continue; + } + + // Raw r"String" + if (_scanner.scan(RegExp(r'r".*"'))) { + _spans.add(_HighlightSpan( + _HighlightType.string, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Raw r'String' + if (_scanner.scan(RegExp(r"r'.*'"))) { + _spans.add(_HighlightSpan( + _HighlightType.string, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Multiline """String""" + if (_scanner.scan(RegExp(r'"""(?:[^"\\]|\\(.|\n))*"""'))) { + _spans.add(_HighlightSpan( + _HighlightType.string, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Multiline '''String''' + if (_scanner.scan(RegExp(r"'''(?:[^'\\]|\\(.|\n))*'''"))) { + _spans.add(_HighlightSpan( + _HighlightType.string, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // "String" + if (_scanner.scan(RegExp(r'"(?:[^"\\]|\\.)*"'))) { + _spans.add(_HighlightSpan( + _HighlightType.string, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // 'String' + if (_scanner.scan(RegExp(r"'(?:[^'\\]|\\.)*'"))) { + _spans.add(_HighlightSpan( + _HighlightType.string, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Double + if (_scanner.scan(RegExp(r'\d+\.\d+'))) { + _spans.add(_HighlightSpan( + _HighlightType.number, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Integer + if (_scanner.scan(RegExp(r'\d+'))) { + _spans.add(_HighlightSpan( + _HighlightType.number, + _scanner.lastMatch.start, + _scanner.lastMatch.end) + ); + continue; + } + + // Punctuation + if (_scanner.scan(RegExp(r'[\[\]{}().!=<>&\|\?\+\-\*/%\^~;:,]'))) { + _spans.add(_HighlightSpan( + _HighlightType.punctuation, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Meta data + if (_scanner.scan(RegExp(r'@\w+'))) { + _spans.add(_HighlightSpan( + _HighlightType.keyword, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + continue; + } + + // Words + if (_scanner.scan(RegExp(r'\w+'))) { + _HighlightType type; + + String word = _scanner.lastMatch[0]; + if (word.startsWith('_')) + word = word.substring(1); + + if (_keywords.contains(word)) + type = _HighlightType.keyword; + else if (_builtInTypes.contains(word)) + type = _HighlightType.keyword; + else if (_firstLetterIsUpperCase(word)) + type = _HighlightType.klass; + else if (word.length >= 2 && word.startsWith('k') && _firstLetterIsUpperCase(word.substring(1))) + type = _HighlightType.constant; + + if (type != null) { + _spans.add(_HighlightSpan( + type, + _scanner.lastMatch.start, + _scanner.lastMatch.end + )); + } + } + + // Check if this loop did anything + if (lastLoopPosition == _scanner.position) { + // Failed to parse this file, abort gracefully + return false; + } + lastLoopPosition = _scanner.position; + } + + _simplify(); + return true; + } + + void _simplify() { + for (int i = _spans.length - 2; i >= 0; i -= 1) { + if (_spans[i].type == _spans[i + 1].type && _spans[i].end == _spans[i + 1].start) { + _spans[i] = _HighlightSpan( + _spans[i].type, + _spans[i].start, + _spans[i + 1].end + ); + _spans.removeAt(i + 1); + } + } + } + + bool _firstLetterIsUpperCase(String str) { + if (str.isNotEmpty) { + final String first = str.substring(0, 1); + return first == first.toUpperCase(); + } + return false; + } +} + +enum _HighlightType { + number, + comment, + keyword, + string, + punctuation, + klass, + constant +} + +class _HighlightSpan { + _HighlightSpan(this.type, this.start, this.end); + final _HighlightType type; + final int start; + final int end; + + String textForSpan(String src) { + return src.substring(start, end); + } + + TextStyle textStyle(SyntaxHighlighterStyle style) { + if (type == _HighlightType.number) + return style.numberStyle; + else if (type == _HighlightType.comment) + return style.commentStyle; + else if (type == _HighlightType.keyword) + return style.keywordStyle; + else if (type == _HighlightType.string) + return style.stringStyle; + else if (type == _HighlightType.punctuation) + return style.punctuationStyle; + else if (type == _HighlightType.klass) + return style.classStyle; + else if (type == _HighlightType.constant) + return style.constantStyle; + else + return style.baseStyle; + } +} diff --git a/lib/common/iconNames.dart b/lib/common/iconNames.dart new file mode 100644 index 00000000..a9d0f02a --- /dev/null +++ b/lib/common/iconNames.dart @@ -0,0 +1,15 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/23 + * Time: 上午2:14 + * email: zhu.yan@alibaba-inc.com + * tartget: FlatButton 的示例 + */ +import 'package:fluro/fluro.dart'; +import 'package:flutter/material.dart'; + + +class IconNames { + static List Names = [Icons.ac_unit,Icons.access_alarm,Icons.access_alarms,Icons.access_time,Icons.accessibility,Icons.accessibility_new,Icons.accessible,Icons.accessible_forward,Icons.account_balance,Icons.account_balance_wallet,Icons.account_box,Icons.account_circle,Icons.adb,Icons.add,Icons.add_a_photo,Icons.add_alarm,Icons.add_alert,Icons.add_box,Icons.add_call,Icons.add_circle,Icons.add_circle_outline,Icons.add_comment,Icons.add_location,Icons.add_photo_alternate,Icons.add_shopping_cart,Icons.add_to_home_screen,Icons.add_to_photos,Icons.add_to_queue,Icons.adjust,Icons.airline_seat_flat,Icons.airline_seat_flat_angled,Icons.airline_seat_individual_suite,Icons.airline_seat_legroom_extra,Icons.airline_seat_legroom_normal,Icons.airline_seat_legroom_reduced,Icons.airline_seat_recline_extra,Icons.airline_seat_recline_normal,Icons.airplanemode_active,Icons.airplanemode_inactive,Icons.airplay,Icons.airport_shuttle,Icons.alarm,Icons.alarm_add,Icons.alarm_off,Icons.alarm_on,Icons.album,Icons.all_inclusive,Icons.all_out,Icons.alternate_email,Icons.android,Icons.announcement,Icons.apps,Icons.archive,Icons.arrow_back,Icons.arrow_back_ios,Icons.arrow_downward,Icons.arrow_drop_down,Icons.arrow_drop_down_circle,Icons.arrow_drop_up,Icons.arrow_forward,Icons.arrow_forward_ios,Icons.arrow_left,Icons.arrow_right,Icons.arrow_upward,Icons.art_track,Icons.aspect_ratio,Icons.assessment,Icons.assignment,Icons.assignment_ind,Icons.assignment_late,Icons.assignment_return,Icons.assignment_returned,Icons.assignment_turned_in,Icons.assistant,Icons.assistant_photo,Icons.atm,Icons.attach_file,Icons.attach_money,Icons.attachment,Icons.audiotrack,Icons.autorenew,Icons.av_timer,Icons.backspace,Icons.backup,Icons.battery_alert,Icons.battery_charging_full,Icons.battery_full,Icons.battery_std,Icons.battery_unknown,Icons.beach_access,Icons.beenhere,Icons.block,Icons.bluetooth,Icons.bluetooth_audio,Icons.bluetooth_connected,Icons.bluetooth_disabled,Icons.bluetooth_searching,Icons.blur_circular,Icons.blur_linear,Icons.blur_off,Icons.blur_on,Icons.book,Icons.bookmark,Icons.bookmark_border,Icons.border_all,Icons.border_bottom,Icons.border_clear,Icons.border_color,Icons.border_horizontal,Icons.border_inner,Icons.border_left,Icons.border_outer,Icons.border_right,Icons.border_style,Icons.border_top,Icons.border_vertical,Icons.branding_watermark,Icons.brightness_1,Icons.brightness_2,Icons.brightness_3,Icons.brightness_4,Icons.brightness_5,Icons.brightness_6,Icons.brightness_7,Icons.brightness_auto,Icons.brightness_high,Icons.brightness_low,Icons.brightness_medium,Icons.broken_image,Icons.brush,Icons.bubble_chart,Icons.bug_report,Icons.build,Icons.burst_mode,Icons.business,Icons.business_center,Icons.cached,Icons.cake,Icons.calendar_today,Icons.calendar_view_day,Icons.call,Icons.call_end,Icons.call_made,Icons.call_merge,Icons.call_missed,Icons.call_missed_outgoing,Icons.call_received,Icons.call_split,Icons.call_to_action,Icons.camera,Icons.camera_alt,Icons.camera_enhance,Icons.camera_front,Icons.camera_rear,Icons.camera_roll,Icons.cancel,Icons.card_giftcard,Icons.card_membership,Icons.card_travel,Icons.casino,Icons.cast,Icons.cast_connected,Icons.category,Icons.center_focus_strong,Icons.center_focus_weak,Icons.change_history,Icons.chat,Icons.chat_bubble,Icons.chat_bubble_outline,Icons.check,Icons.check_box,Icons.check_box_outline_blank,Icons.check_circle,Icons.check_circle_outline,Icons.chevron_left,Icons.chevron_right,Icons.child_care,Icons.child_friendly,Icons.chrome_reader_mode,Icons.class_,Icons.clear,Icons.clear_all,Icons.close,Icons.closed_caption,Icons.cloud,Icons.cloud_circle,Icons.cloud_done,Icons.cloud_download,Icons.cloud_off,Icons.cloud_queue,Icons.cloud_upload,Icons.code,Icons.collections,Icons.collections_bookmark,Icons.color_lens,Icons.colorize,Icons.comment,Icons.compare,Icons.compare_arrows,Icons.computer,Icons.confirmation_number,Icons.contact_mail,Icons.contact_phone,Icons.contacts,Icons.content_copy,Icons.content_cut,Icons.content_paste,Icons.control_point,Icons.control_point_duplicate,Icons.copyright,Icons.create,Icons.create_new_folder,Icons.credit_card,Icons.crop,Icons.crop_3_2,Icons.crop_5_4,Icons.crop_7_5,Icons.crop_16_9,Icons.crop_din,Icons.crop_free,Icons.crop_landscape,Icons.crop_original,Icons.crop_portrait,Icons.crop_rotate,Icons.crop_square,Icons.dashboard,Icons.data_usage,Icons.date_range,Icons.dehaze,Icons.delete,Icons.delete_forever,Icons.delete_outline,Icons.delete_sweep,Icons.departure_board,Icons.description,Icons.desktop_mac,Icons.desktop_windows,Icons.details,Icons.developer_board,Icons.developer_mode,Icons.device_hub,Icons.device_unknown,Icons.devices,Icons.devices_other,Icons.dialer_sip,Icons.dialpad,Icons.directions,Icons.directions_bike,Icons.directions_boat,Icons.directions_bus,Icons.directions_car,Icons.directions_railway,Icons.directions_run,Icons.directions_subway,Icons.directions_transit,Icons.directions_walk,Icons.disc_full,Icons.dns,Icons.do_not_disturb,Icons.do_not_disturb_alt,Icons.do_not_disturb_off,Icons.do_not_disturb_on,Icons.dock,Icons.domain,Icons.done,Icons.done_all,Icons.done_outline,Icons.donut_large,Icons.donut_small,Icons.drafts,Icons.drag_handle,Icons.drive_eta,Icons.dvr,Icons.edit,Icons.edit_attributes,Icons.edit_location,Icons.eject,Icons.email,Icons.enhanced_encryption,Icons.equalizer,Icons.error,Icons.error_outline,Icons.euro_symbol,Icons.ev_station,Icons.event,Icons.event_available,Icons.event_busy,Icons.event_note,Icons.event_seat,Icons.exit_to_app,Icons.expand_less,Icons.expand_more,Icons.explicit,Icons.explore,Icons.exposure,Icons.exposure_neg_1,Icons.exposure_neg_2,Icons.exposure_plus_1,Icons.exposure_plus_2,Icons.exposure_zero,Icons.extension,Icons.face,Icons.fast_forward,Icons.fast_rewind,Icons.fastfood,Icons.favorite,Icons.favorite_border,Icons.featured_play_list,Icons.featured_video,Icons.feedback,Icons.fiber_dvr,Icons.fiber_manual_record,Icons.fiber_new,Icons.fiber_pin,Icons.fiber_smart_record,Icons.file_download,Icons.file_upload,Icons.filter,Icons.filter_1,Icons.filter_2,Icons.filter_3,Icons.filter_4,Icons.filter_5,Icons.filter_6,Icons.filter_7,Icons.filter_8,Icons.filter_9,Icons.filter_9_plus,Icons.filter_b_and_w,Icons.filter_center_focus,Icons.filter_drama,Icons.filter_frames,Icons.filter_hdr,Icons.filter_list,Icons.filter_none,Icons.filter_tilt_shift,Icons.filter_vintage,Icons.find_in_page,Icons.find_replace,Icons.fingerprint,Icons.first_page,Icons.fitness_center,Icons.flag,Icons.flare,Icons.flash_auto,Icons.flash_off,Icons.flash_on,Icons.flight,Icons.flight_land,Icons.flight_takeoff,Icons.flip,Icons.flip_to_back,Icons.flip_to_front,Icons.folder,Icons.folder_open,Icons.folder_shared,Icons.folder_special,Icons.font_download,Icons.format_align_center,Icons.format_align_justify,Icons.format_align_left,Icons.format_align_right,Icons.format_bold,Icons.format_clear,Icons.format_color_fill,Icons.format_color_reset,Icons.format_color_text,Icons.format_indent_decrease,Icons.format_indent_increase,Icons.format_italic,Icons.format_line_spacing,Icons.format_list_bulleted,Icons.format_list_numbered,Icons.format_list_numbered_rtl,Icons.format_paint,Icons.format_quote,Icons.format_shapes,Icons.format_size,Icons.format_strikethrough,Icons.format_textdirection_l_to_r,Icons.format_textdirection_r_to_l,Icons.format_underlined,Icons.forum,Icons.forward,Icons.forward_5,Icons.forward_10,Icons.forward_30,Icons.four_k,Icons.free_breakfast,Icons.fullscreen,Icons.fullscreen_exit,Icons.functions,Icons.g_translate,Icons.gamepad,Icons.games,Icons.gavel,Icons.gesture,Icons.get_app,Icons.gif,Icons.golf_course,Icons.gps_fixed,Icons.gps_not_fixed,Icons.gps_off,Icons.grade,Icons.gradient,Icons.grain,Icons.graphic_eq,Icons.grid_off,Icons.grid_on,Icons.group,Icons.group_add,Icons.group_work,Icons.hd,Icons.hdr_off,Icons.hdr_on,Icons.hdr_strong,Icons.hdr_weak,Icons.headset,Icons.headset_mic,Icons.headset_off,Icons.healing,Icons.hearing,Icons.help,Icons.help_outline,Icons.high_quality,Icons.highlight,Icons.highlight_off,Icons.history,Icons.home,Icons.hot_tub,Icons.hotel,Icons.hourglass_empty,Icons.hourglass_full,Icons.http,Icons.https,Icons.image,Icons.image_aspect_ratio,Icons.import_contacts,Icons.import_export,Icons.important_devices,Icons.inbox,Icons.indeterminate_check_box,Icons.info,Icons.info_outline,Icons.input,Icons.insert_chart,Icons.insert_comment,Icons.insert_drive_file,Icons.insert_emoticon,Icons.insert_invitation,Icons.insert_link,Icons.insert_photo,Icons.invert_colors,Icons.invert_colors_off,Icons.iso,Icons.keyboard,Icons.keyboard_arrow_down,Icons.keyboard_arrow_left,Icons.keyboard_arrow_right,Icons.keyboard_arrow_up,Icons.keyboard_backspace,Icons.keyboard_capslock,Icons.keyboard_hide,Icons.keyboard_return,Icons.keyboard_tab,Icons.keyboard_voice,Icons.kitchen,Icons.label,Icons.label_important,Icons.label_outline,Icons.landscape,Icons.language,Icons.laptop,Icons.laptop_chromebook,Icons.laptop_mac,Icons.laptop_windows,Icons.last_page,Icons.launch,Icons.layers,Icons.layers_clear,Icons.leak_add,Icons.leak_remove,Icons.lens,Icons.library_add,Icons.library_books,Icons.library_music,Icons.lightbulb_outline,Icons.line_style,Icons.line_weight,Icons.linear_scale,Icons.link,Icons.link_off,Icons.linked_camera,Icons.list,Icons.live_help,Icons.live_tv,Icons.local_activity,Icons.local_airport,Icons.local_atm,Icons.local_bar,Icons.local_cafe,Icons.local_car_wash,Icons.local_convenience_store,Icons.local_dining,Icons.local_drink,Icons.local_florist,Icons.local_gas_station,Icons.local_grocery_store,Icons.local_hospital,Icons.local_hotel,Icons.local_laundry_service,Icons.local_library,Icons.local_mall,Icons.local_movies,Icons.local_offer,Icons.local_parking,Icons.local_pharmacy,Icons.local_phone,Icons.local_pizza,Icons.local_play,Icons.local_post_office,Icons.local_printshop,Icons.local_see,Icons.local_shipping,Icons.local_taxi,Icons.location_city,Icons.location_disabled,Icons.location_off,Icons.location_on,Icons.location_searching,Icons.lock,Icons.lock_open,Icons.lock_outline,Icons.looks,Icons.looks_3,Icons.looks_4,Icons.looks_5,Icons.looks_6,Icons.looks_one,Icons.looks_two,Icons.loop,Icons.loupe,Icons.low_priority,Icons.loyalty,Icons.mail,Icons.mail_outline,Icons.map,Icons.markunread,Icons.markunread_mailbox,Icons.maximize,Icons.memory,Icons.menu,Icons.merge_type,Icons.message,Icons.mic,Icons.mic_none,Icons.mic_off,Icons.minimize,Icons.missed_video_call,Icons.mms,Icons.mobile_screen_share,Icons.mode_comment,Icons.mode_edit,Icons.monetization_on,Icons.money_off,Icons.monochrome_photos,Icons.mood,Icons.mood_bad,Icons.more,Icons.more_horiz,Icons.more_vert,Icons.motorcycle,Icons.mouse,Icons.move_to_inbox,Icons.movie,Icons.movie_creation,Icons.movie_filter,Icons.multiline_chart,Icons.music_note,Icons.music_video,Icons.my_location,Icons.nature,Icons.nature_people,Icons.navigate_before,Icons.navigate_next,Icons.navigation,Icons.near_me,Icons.network_cell,Icons.network_check,Icons.network_locked,Icons.network_wifi,Icons.new_releases,Icons.next_week,Icons.nfc,Icons.no_encryption,Icons.no_sim,Icons.not_interested,Icons.not_listed_location,Icons.note,Icons.note_add,Icons.notification_important,Icons.notifications,Icons.notifications_active,Icons.notifications_none,Icons.notifications_off,Icons.notifications_paused,Icons.offline_bolt,Icons.offline_pin,Icons.ondemand_video,Icons.opacity,Icons.open_in_browser,Icons.open_in_new,Icons.open_with,Icons.outlined_flag,Icons.pages,Icons.pageview,Icons.palette,Icons.pan_tool,Icons.panorama,Icons.panorama_fish_eye,Icons.panorama_horizontal,Icons.panorama_vertical,Icons.panorama_wide_angle,Icons.party_mode,Icons.pause,Icons.pause_circle_filled,Icons.pause_circle_outline,Icons.payment,Icons.people,Icons.people_outline,Icons.perm_camera_mic,Icons.perm_contact_calendar,Icons.perm_data_setting,Icons.perm_device_information,Icons.perm_identity,Icons.perm_media,Icons.perm_phone_msg,Icons.perm_scan_wifi,Icons.person,Icons.person_add,Icons.person_outline,Icons.person_pin,Icons.person_pin_circle,Icons.personal_video,Icons.pets,Icons.phone,Icons.phone_android,Icons.phone_bluetooth_speaker,Icons.phone_forwarded,Icons.phone_in_talk,Icons.phone_iphone,Icons.phone_locked,Icons.phone_missed,Icons.phone_paused,Icons.phonelink,Icons.phonelink_erase,Icons.phonelink_lock,Icons.phonelink_off,Icons.phonelink_ring,Icons.phonelink_setup,Icons.photo,Icons.photo_album,Icons.photo_camera,Icons.photo_filter,Icons.photo_library,Icons.photo_size_select_actual,Icons.photo_size_select_large,Icons.photo_size_select_small,Icons.picture_as_pdf,Icons.picture_in_picture,Icons.picture_in_picture_alt,Icons.pie_chart,Icons.pie_chart_outlined,Icons.pin_drop,Icons.place,Icons.play_arrow,Icons.play_circle_filled,Icons.play_circle_outline,Icons.play_for_work,Icons.playlist_add,Icons.playlist_add_check,Icons.playlist_play,Icons.plus_one,Icons.poll,Icons.polymer,Icons.pool,Icons.portable_wifi_off,Icons.portrait,Icons.power,Icons.power_input,Icons.power_settings_new,Icons.pregnant_woman,Icons.present_to_all,Icons.print,Icons.priority_high,Icons.public,Icons.publish,Icons.query_builder,Icons.question_answer,Icons.queue,Icons.queue_music,Icons.queue_play_next,Icons.radio,Icons.radio_button_checked,Icons.radio_button_unchecked,Icons.rate_review,Icons.receipt,Icons.recent_actors,Icons.record_voice_over,Icons.redeem,Icons.redo,Icons.refresh,Icons.remove,Icons.remove_circle,Icons.remove_circle_outline,Icons.remove_from_queue,Icons.remove_red_eye,Icons.remove_shopping_cart,Icons.reorder,Icons.repeat,Icons.repeat_one,Icons.replay,Icons.replay_5,Icons.replay_10,Icons.replay_30,Icons.reply,Icons.reply_all,Icons.report,Icons.report_off,Icons.report_problem,Icons.restaurant,Icons.restaurant_menu,Icons.restore,Icons.restore_from_trash,Icons.restore_page,Icons.ring_volume,Icons.room,Icons.room_service,Icons.rotate_90_degrees_ccw,Icons.rotate_left,Icons.rotate_right,Icons.rounded_corner,Icons.router,Icons.rowing,Icons.rss_feed,Icons.rv_hookup,Icons.satellite,Icons.save,Icons.save_alt,Icons.scanner,Icons.scatter_plot,Icons.schedule,Icons.school,Icons.score,Icons.screen_lock_landscape,Icons.screen_lock_portrait,Icons.screen_lock_rotation,Icons.screen_rotation,Icons.screen_share,Icons.sd_card,Icons.sd_storage,Icons.search,Icons.security,Icons.select_all,Icons.send,Icons.sentiment_dissatisfied,Icons.sentiment_neutral,Icons.sentiment_satisfied,Icons.sentiment_very_dissatisfied,Icons.sentiment_very_satisfied,Icons.settings,Icons.settings_applications,Icons.settings_backup_restore,Icons.settings_bluetooth,Icons.settings_brightness,Icons.settings_cell,Icons.settings_ethernet,Icons.settings_input_antenna,Icons.settings_input_component,Icons.settings_input_composite,Icons.settings_input_hdmi,Icons.settings_input_svideo,Icons.settings_overscan,Icons.settings_phone,Icons.settings_power,Icons.settings_remote,Icons.settings_system_daydream,Icons.settings_voice,Icons.share,Icons.shop,Icons.shop_two,Icons.shopping_basket,Icons.shopping_cart,Icons.short_text,Icons.show_chart,Icons.shuffle,Icons.shutter_speed,Icons.signal_cellular_4_bar,Icons.signal_cellular_connected_no_internet_4_bar,Icons.signal_cellular_no_sim,Icons.signal_cellular_null,Icons.signal_cellular_off,Icons.signal_wifi_4_bar,Icons.signal_wifi_4_bar_lock,Icons.signal_wifi_off,Icons.sim_card,Icons.sim_card_alert,Icons.skip_next,Icons.skip_previous,Icons.slideshow,Icons.slow_motion_video,Icons.smartphone,Icons.smoke_free,Icons.smoking_rooms,Icons.sms,Icons.sms_failed,Icons.snooze,Icons.sort,Icons.sort_by_alpha,Icons.spa,Icons.space_bar,Icons.speaker,Icons.speaker_group,Icons.speaker_notes,Icons.speaker_notes_off,Icons.speaker_phone,Icons.spellcheck,Icons.star,Icons.star_border,Icons.star_half,Icons.stars,Icons.stay_current_landscape,Icons.stay_current_portrait,Icons.stay_primary_landscape,Icons.stay_primary_portrait,Icons.stop,Icons.stop_screen_share,Icons.storage,Icons.store,Icons.store_mall_directory,Icons.straighten,Icons.streetview,Icons.strikethrough_s,Icons.style,Icons.subdirectory_arrow_left,Icons.subdirectory_arrow_right,Icons.subject,Icons.subscriptions,Icons.subtitles,Icons.subway,Icons.supervised_user_circle,Icons.supervisor_account,Icons.surround_sound,Icons.swap_calls,Icons.swap_horiz,Icons.swap_horizontal_circle,Icons.swap_vert,Icons.swap_vertical_circle,Icons.switch_camera,Icons.switch_video,Icons.sync,Icons.sync_disabled,Icons.sync_problem,Icons.system_update,Icons.system_update_alt,Icons.tab,Icons.tab_unselected,Icons.table_chart,Icons.tablet,Icons.tablet_android,Icons.tablet_mac,Icons.tag_faces,Icons.tap_and_play,Icons.terrain,Icons.text_fields,Icons.text_format,Icons.text_rotate_up,Icons.text_rotate_vertical,Icons.text_rotation_angledown,Icons.text_rotation_angleup,Icons.text_rotation_down,Icons.text_rotation_none,Icons.textsms,Icons.texture,Icons.theaters,Icons.threed_rotation,Icons.threesixty,Icons.thumb_down,Icons.thumb_up,Icons.thumbs_up_down,Icons.time_to_leave,Icons.timelapse,Icons.timeline,Icons.timer,Icons.timer_3,Icons.timer_10,Icons.timer_off,Icons.title,Icons.toc,Icons.today,Icons.toll,Icons.tonality,Icons.touch_app,Icons.toys,Icons.track_changes,Icons.traffic,Icons.train,Icons.tram,Icons.transfer_within_a_station,Icons.transform,Icons.transit_enterexit,Icons.translate,Icons.trending_down,Icons.trending_flat,Icons.trending_up,Icons.trip_origin,Icons.tune,Icons.turned_in,Icons.turned_in_not,Icons.tv,Icons.unarchive,Icons.undo,Icons.unfold_less,Icons.unfold_more,Icons.update,Icons.usb,Icons.verified_user,Icons.vertical_align_bottom,Icons.vertical_align_center,Icons.vertical_align_top,Icons.vibration,Icons.video_call,Icons.video_label,Icons.video_library,Icons.videocam,Icons.videocam_off,Icons.videogame_asset,Icons.view_agenda,Icons.view_array,Icons.view_carousel,Icons.view_column,Icons.view_comfy,Icons.view_compact,Icons.view_day,Icons.view_headline,Icons.view_list,Icons.view_module,Icons.view_quilt,Icons.view_stream,Icons.view_week,Icons.vignette,Icons.visibility,Icons.visibility_off,Icons.voice_chat,Icons.voicemail,Icons.volume_down,Icons.volume_mute,Icons.volume_off,Icons.volume_up,Icons.vpn_key,Icons.vpn_lock,Icons.wallpaper,Icons.warning,Icons.watch,Icons.watch_later,Icons.wb_auto,Icons.wb_cloudy,Icons.wb_incandescent,Icons.wb_iridescent,Icons.wb_sunny,Icons.wc,Icons.web,Icons.web_asset,Icons.weekend,Icons.whatshot,Icons.widgets,Icons.wifi,Icons.wifi_lock,Icons.wifi_tethering,Icons.work,Icons.wrap_text,Icons.youtube_searched_for,Icons.zoom_in,Icons.zoom_out,Icons.zoom_out_map]; +} \ No newline at end of file diff --git a/lib/common/myListView.dart b/lib/common/myListView.dart new file mode 100644 index 00000000..ac50f3d2 --- /dev/null +++ b/lib/common/myListView.dart @@ -0,0 +1,70 @@ + +import 'package:flutter/material.dart'; +import 'package:url_launcher/url_launcher.dart'; + +class MyListView extends StatelessWidget { + +final String currCodeUrl; +final String currTitle; +final String developer; + +const MyListView({ Key key,this.currCodeUrl, this.currTitle, this.developer}): +super(key:key); + + + void _launchURL(String url) async { + if (await canLaunch(url)) { + await launch(url); + } else { + throw 'Could not launch $url'; + } + } + + @override + Widget build(BuildContext context) { + return Card( + //color: Colors.primaries[index % Colors.primaries.length], + color: Colors.white, + elevation: 4.0, + margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0), + child:ListTile( + onTap:(){ + print('codeUrl:${currCodeUrl}'); + _launchURL(currCodeUrl); + }, + // contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 1.0), + // leading: Container( + // padding: EdgeInsets.only(right: 12.0), + // decoration: new BoxDecoration( + // border: new Border( + // right: new BorderSide(width: 1.0, color: Colors.grey))), + // child: Icon(smallParts_icon, color: smallParts_Color), + // ), + title: Padding( + child: Text( + + currTitle, + style: TextStyle(color: Colors.black,fontSize:15.0), + + ), + padding: EdgeInsets.only(top: 10.0), + ), + // subtitle: Text("Intermediate", style: TextStyle(color: Colors.white)), + + subtitle: Row( + + children: [ + Padding( + child: Text( developer, style: TextStyle(color: Colors.black54,fontSize:10.0) + ), + padding:EdgeInsets.only(top: 10.0,bottom: 10.0), + ) + //Icon(Icons.linear_scale, color: smallParts_Color), + + ], + ), + trailing: Icon(Icons.keyboard_arrow_right, color: Colors.grey, size: 30.0) + ) + ); + } +} \ No newline at end of file diff --git a/lib/common/net_utils.dart b/lib/common/net_utils.dart new file mode 100644 index 00000000..d5dbcdc6 --- /dev/null +++ b/lib/common/net_utils.dart @@ -0,0 +1,17 @@ +import 'package:dio/dio.dart'; +import 'dart:async'; + +var dio = new Dio(); + +class NetUtils { + + static Future get(String url,{Map params}) async{ + var response = await dio.get(url, data: params); + return response.data; + } + + static Future post(String url,Map params) async{ + var response = await dio.post(url, data: params); + return response.data; + } +} \ No newline at end of file diff --git a/lib/common/provider.dart b/lib/common/provider.dart index fa869bb8..d9e2d5dc 100644 --- a/lib/common/provider.dart +++ b/lib/common/provider.dart @@ -13,7 +13,7 @@ class Provider { Future init(bool isCreate) async { String databasesPath = await getDatabasesPath(); String path = join(databasesPath,'flutter.db'); - print("path ${path}"); + // print("path ${path}"); if(db == null && isCreate){ ByteData data = await rootBundle.load(join("assets", "app.db")); @@ -21,12 +21,12 @@ class Provider { await new File(path).writeAsBytes(bytes); db = await openDatabase(path,version: 2,onCreate : (Database db, int version) async{ - print('db created version is $version'); + // print('db created version is $version'); },onOpen : (Database db) async{ - print('new db opened'); + // print('new db opened'); }); }else{ - print('Opening existing database'); + // print('Opening existing database'); } } } diff --git a/lib/common/sql.dart b/lib/common/sql.dart index 4910e664..1b8c868f 100644 --- a/lib/common/sql.dart +++ b/lib/common/sql.dart @@ -4,6 +4,7 @@ import 'package:sqflite/sqflite.dart'; + class BaseModel{ Database db; final String table = ''; @@ -15,7 +16,6 @@ class BaseModel{ class Sql extends BaseModel { final String tableName; - Sql.setTable(String name) : tableName = name, super(Provider.db); @@ -36,12 +36,12 @@ class Sql extends BaseModel { String stringConditions = ''; int index = 0; - print("condition>>> $conditions"); + // print("condition>>> $conditions"); conditions.forEach((key, value) { if (value == null) { return ; } - print("$key value.runtimeType: ${value.runtimeType}"); + // print("$key value.runtimeType: ${value.runtimeType}"); if (value.runtimeType == String) { stringConditions = '$stringConditions $key = "$value"'; } @@ -54,7 +54,7 @@ class Sql extends BaseModel { } index++; }); - print("this is string condition for sql > $stringConditions"); + // print("this is string condition for sql > $stringConditions"); return await this.query(tableName, where: stringConditions); } @@ -63,4 +63,37 @@ class Sql extends BaseModel { json['id'] = id; return json; } + /// + /// 搜索 + /// @param Object condition + /// @mods [And, Or] default is Or + /// search({'name': "hanxu', 'id': 1}; + /// + Future search({Map conditions, String Mods = 'Or'}) async { + if (conditions == null || conditions.isEmpty) { + return this.get(); + } + String stringConditions = ''; + int index = 0; + conditions.forEach((key, value) { + if (value == null) { + return ; + } + + if (value.runtimeType == String) { + stringConditions = '$stringConditions $key like "%$value%"'; + } + if (value.runtimeType == int) { + stringConditions = '$stringConditions $key = "%$value%"'; + } + + if (index >= 0 && index < conditions.length -1) { + stringConditions = '$stringConditions $Mods'; + } + index++; + }); + print("this is string search condition for sql > $stringConditions"); + + return await this.query(tableName, where: stringConditions); + } } \ No newline at end of file diff --git a/lib/common/util.dart b/lib/common/util.dart new file mode 100644 index 00000000..1b9fab38 --- /dev/null +++ b/lib/common/util.dart @@ -0,0 +1,90 @@ +import 'package:flutter/material.dart'; + +const Map emumMap = const { + "Objective-C": Color(0xFF438EFF), + "Perl": Color(0xFF0298C3), + "Python": Color(0xFF0298C3), + "JavaScript": Color(0xFFF1E05A), + "PHP": Color(0xFF4F5D95), + "R": Color(0xFF188CE7), + "Lua": Color(0xFFC22D40), + "Scala": Color(0xFF020080), + "Swift": Color(0xFFFFAC45), + "Kotlin": Color(0xFFF18E33), + "Vue": Colors.black, + "Ruby": Color(0xFF701617), + "Shell": Color(0xFF89E051), + "TypeScript": Color(0xFF2B7489), + "C++": Color(0xFFF34B7D), + "CSS": Color(0xFF563C7C), + "Java": Color(0xFFB07219), + "C#": Color(0xFF178600), + "Go": Color(0xFF375EAB), + "Erlang": Color(0xFFB83998), + "C": Color(0xFF555555), +}; + +class Util { + static String getTimeDuration(String comTime) { + var nowTime = DateTime.now(); + var compareTime = DateTime.parse(comTime); + if (nowTime.isAfter(compareTime)) { + if (nowTime.year == compareTime.year) { + if (nowTime.month == compareTime.month) { + if (nowTime.day == compareTime.day) { + if (nowTime.hour == compareTime.hour) { + if (nowTime.minute == compareTime.minute) { + return '片刻之间'; + } + return (nowTime.minute - compareTime.minute).toString() + '分钟前'; + } + return (nowTime.hour - compareTime.hour).toString() + '小时前'; + } + return (nowTime.day - compareTime.day).toString() + '天前'; + } + return (nowTime.month - compareTime.month).toString() + '月前'; + } + return (nowTime.year - compareTime.year).toString() + '年前'; + } + return 'time error'; + } + + static double setPercentage(percentage, context) { + return MediaQuery.of(context).size.width * percentage; + } + + static Color getLangColor(String language) { + if (emumMap.containsKey(language)) { + return emumMap[language]; + } + return Colors.black26; + } + + static String getTimeDate(String comTime) { + var compareTime = DateTime.parse(comTime); + String weekDay = ''; + switch (compareTime.weekday) { + case 2: + weekDay = '周二'; + break; + case 3: + weekDay = '周三'; + break; + case 4: + weekDay = '周四'; + break; + case 5: + weekDay = '周五'; + break; + case 6: + weekDay = '周六'; + break; + case 7: + weekDay = '周日'; + break; + default: + weekDay = '周一'; + } + return '${compareTime.month}-${compareTime.day} $weekDay'; + } +} diff --git a/lib/common/widget-demo.dart b/lib/common/widget-demo.dart new file mode 100644 index 00000000..7c82237e --- /dev/null +++ b/lib/common/widget-demo.dart @@ -0,0 +1,75 @@ +import 'package:flutter/material.dart'; +import 'package:url_launcher/url_launcher.dart'; +import '../routers/application.dart'; + +class WidgetDemo extends StatelessWidget { + final Widget child; + final String docUrl; + final String title; + final String codeUrl; + + WidgetDemo( + {Key key, + @required this.title, + @required this.child, + @required this.codeUrl, + @required this.docUrl}) + : super(key: key); + + void _launchURL(String url) async { + if (await canLaunch(url)) { + await launch(url); + } else { + throw 'Could not launch $url'; + } + } + + @override + Widget build(BuildContext context,[bottomNaviBar]) { + return Scaffold( + appBar: new AppBar( + title: Text(title), + actions: [ + new IconButton( + tooltip: 'widget doc', + onPressed: (){ + _launchURL(docUrl); + }, + icon: Icon(Icons.library_books), + ), + new IconButton( + tooltip: 'github code', + onPressed: (){ + _launchURL(codeUrl); + }, + icon: Icon(Icons.code), + ), + new IconButton( + tooltip: 'goBack home', + onPressed: (){ + Navigator.popUntil(context, ModalRoute.withName('/')); + }, + icon: Icon(Icons.home), + ), + ], + ), + body: new Container( + padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0), + child: ListView( + shrinkWrap: true, + padding: const EdgeInsets.all(0.0), + children: [ + Column( + children: [ + SizedBox( + height: 10.0, + ), + child, + ], + ), + ]) + ), + bottomNavigationBar: (bottomNaviBar is Widget)?bottomNaviBar:null + ); + } +} diff --git a/lib/common/widget_demo.dart b/lib/common/widget_demo.dart new file mode 100644 index 00000000..6f46f313 --- /dev/null +++ b/lib/common/widget_demo.dart @@ -0,0 +1,99 @@ +/** + * @author Nealyang + * + * 新widget详情页模板 + */ +import 'package:flutter/material.dart'; +import 'package:url_launcher/url_launcher.dart'; +// import 'package:flutter_markdown/flutter_markdown.dart'; +import '../routers/application.dart'; +import '../components/markdown.dart'; + +class WidgetDemo extends StatelessWidget { + final List contentList; + final String docUrl; + final String title; + final String codeUrl; + + WidgetDemo( + {Key key, + @required this.title, + @required this.contentList, + @required this.codeUrl, + @required this.docUrl}) + : super(key: key); + + void _launchURL(String url) async { + if (await canLaunch(url)) { + await launch(url); + } else { + throw 'Could not launch $url'; + } + } + + List _buildContent() { + List _list = [ + SizedBox( + height: 10.0, + ), + ]; + contentList.forEach((item) { + if (item.runtimeType == String) { + _list.add(MarkdownBody(item)); + _list.add( + SizedBox( + height: 20.0, + ), + ); + } else { + _list.add(item); + } + }); + return _list; + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text(title), + actions: [ + new IconButton( + tooltip: 'widget doc', + onPressed: () { + _launchURL(docUrl); + }, + icon: Icon(Icons.library_books), + ), + new IconButton( + tooltip: 'github code', + onPressed: () { + print(Application.github['widgetsURL']+codeUrl); + _launchURL(Application.github['widgetsURL']+codeUrl); + }, + icon: Icon(Icons.code), + ), + new IconButton( + tooltip: 'goBack home', + onPressed: () { + Navigator.popUntil(context, ModalRoute.withName('/')); + }, + icon: Icon(Icons.home), + ), + ], + ), + body: Container( + padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0), + child: ListView( + shrinkWrap: true, + padding: const EdgeInsets.all(0.0), + children: [ + Column( + children: _buildContent(), + ), + ], + ), + ), + ); + } +} diff --git a/lib/common/widget_name_to_icon.dart b/lib/common/widget_name_to_icon.dart new file mode 100644 index 00000000..b3436602 --- /dev/null +++ b/lib/common/widget_name_to_icon.dart @@ -0,0 +1,144 @@ +import 'package:flutter/material.dart'; +class WidgetName2Icon { + static Map icons = { + "Element":Icons.explicit, + "Components":Icons.extension, + "Themes":Icons.filter_b_and_w, + "Form":Icons.table_chart, + "Frame":Icons.aspect_ratio, + "Media":Icons.subscriptions, + "Input":Icons.input, + "TextField":Icons.text_fields, + "Checkbox":Icons.check_box, + "CheckboxListTile":Icons.playlist_add_check, + "Button":Icons.aspect_ratio, + "FlatButton":Icons.outlined_flag, + "RaisedButton":Icons.picture_in_picture_alt, + "IconButton":Icons.import_contacts, + "PopupMenuButton":Icons.power_input, + "FloatingActionButton":Icons.flash_off, + "RawMaterialButton":Icons.rowing, + "DropdownButton":Icons.drag_handle, + "OutlineButton":Icons.done_outline, + "Text":Icons.text_format, + "RichText":Icons.text_rotation_angleup, + "Radio":Icons.radio_button_checked, + "RadioListTile":Icons.list, + "Slider":Icons.slideshow, + "SliderTheme":Icons.theaters, + "SliderComponentShape":Icons.format_shapes, + "SliderThemeData":Icons.data_usage, + "Switch":Icons.switch_camera, + "SwitchListTile":Icons.switch_video, + "AnimatedSwitcher":Icons.airplanemode_active, + "Align":Icons.format_align_left, + "Stack":Icons.storage, + "IndexedStack":Icons.star, + "Layout":Icons.layers, + "Row":Icons.recent_actors, + "Column":Icons.cloud_off, + "Container":Icons.edit_location, + "Center":Icons.gesture, + "Box":Icons.hdr_strong, + "ConstrainedBox":Icons.account_box, + "OverflowBox":Icons.email, + "DecoratedBox":Icons.settings_overscan, + "FittedBox":Icons.data_usage, + "LimitedBox":Icons.format_align_justify, + "RenderBox":Icons.error, + "RotateBox":Icons.navigate_next, + "SizedOverflowBox":Icons.undo, + "TextBox":Icons.wallpaper, + "UnconstrainedBox":Icons.account_box, + "Axis":Icons.access_alarm, + "MainAxis":Icons.add_circle, + "CrossAxis":Icons.dehaze, + "FlipAxis":Icons.zoom_out, + "Expanded":Icons.all_out, + "Spacing":Icons.crop_free, + "Padding":Icons.crop, + "SliverPadding":Icons.euro_symbol, + "AnimatedPadding":Icons.zoom_out_map, + "Table":Icons.table_chart, + "Image":Icons.image, + "AssetImage":Icons.image_aspect_ratio, + "DecorationImage":Icons.picture_in_picture, + "DecorationImagePainter":Icons.image, + "ExactAssetImage":Icons.assessment, + "FadeInImage":Icons.flip, + "FileImage":Icons.filter, + "NetworkImage":Icons.network_wifi, + "RawImage":Icons.text_rotation_down, + "PaintImage":Icons.format_paint, + "PrecacheImage":Icons.perm_camera_mic, + "MemoryImage":Icons.memory, + "Icon":Icons.event_available, + "ImageIcon":Icons.image, + "IconTheme":Icons.table_chart, + "IconData":Icons.date_range, + "IconThemeData":Icons.insert_comment, + "Canvas":Icons.edit, + "Material":Icons.android, + "MaterialApp":Icons.android, + "MaterialButton":Icons.speaker, + "MaterialGap":Icons.view_week, + "MaterialSlice":Icons.format_list_numbered_rtl , + "MaterialColor":Icons.color_lens, + "Cupertino":Icons.phone_iphone, + "Scroll":Icons.swap_vertical_circle, + "Tab":Icons.tab, + "Menu":Icons.menu, + "PopupMenuDivider":Icons.remove, + "PopupMenuEntry":Icons.menu, + "CheckedPopupMenuItem":Icons.playlist_add_check, + "DropdownMenuItem":Icons.playlist_play, + "Grid":Icons.grid_on, + "Scaffold":Icons.local_convenience_store, + "Dialog":Icons.add_alert, + "Bar":Icons.border_horizontal, + "Card":Icons.credit_card, + "Panel":Icons.video_label, + "Navigation":Icons.navigation, + "List":Icons.list, + "ScrollView":Icons.move_to_inbox, + "Scrollable":Icons.swap_vertical_circle, + "ScrollbarPainter":Icons.format_paint, + "ScrollMetrics":Icons.camera, + "ScrollPhysics":Icons.control_point_duplicate, + "BoxScrollView":Icons.inbox, + "Chip":Icons.sim_card, + "ChipTheme":Icons.sd_card, + "CustomScrollView":Icons.autorenew, + "NestedScrollView":Icons.panorama_fish_eye, + "ChipThemeData":Icons.sim_card_alert, + "ChoiceChip":Icons.insert_drive_file, + "FilterChip":Icons.note_add, + "InputChip":Icons.restore_page, + "RawChip":Icons.save, + "LinearProgressIndicator":Icons.trending_flat , + "CircularProgressIndicator":Icons.rotate_left , + "ExpansionPanel":Icons.view_stream, + "ExpansionPanelList":Icons.view_headline, + "BottomNavigationBar":Icons.call_to_action, + "ListView":Icons.view_list , + "ListBody":Icons.list , + "AnimatedList":Icons.format_line_spacing , + "SliverAppBar":Icons.content_paste, + "AppBar":Icons.card_membership, + "BottomAppBar":Icons.call_to_action, + "BottomNavigationBarItem":Icons.crop_original, + "FlexibleSpaceBar":Icons.aspect_ratio, + "ButtonBar":Icons.branding_watermark, + "SnackBar":Icons.sms_failed, + "Progress":Icons.sync, + "Pick":Icons.event_note, + "DayPicker":Icons.calendar_today, + "MonthPicker":Icons.date_range, + "YearPicker":Icons.event_busy, + "ShowdatePicker":Icons.event, + "MaterialPageRoute":Icons.album, + "MaterialAccentColor":Icons.brush, + + + }; +} diff --git a/lib/model/cat.dart b/lib/model/cat.dart index e636baf1..08ee4dc7 100644 --- a/lib/model/cat.dart +++ b/lib/model/cat.dart @@ -87,7 +87,7 @@ class CatControlModel{ if (cat == null) { cat = new Cat(depth: 1, parentId: 0); } - print("cat in getList ${cat.toMap()}"); + // print("cat in getList ${cat.toMap()}"); List listJson = await sql.getByCondition(conditions: cat.toSqlCondition()); List cats = listJson.map((json) { diff --git a/lib/model/story.dart b/lib/model/story.dart index 772cf6a1..c8bfbab2 100644 --- a/lib/model/story.dart +++ b/lib/model/story.dart @@ -2,20 +2,22 @@ class StoryModel { final String title; final String image; final int id; + final String url; - StoryModel(this.id, this.title, {this.image}); + StoryModel(this.id, this.title, {this.image,this.url}); StoryModel.fromJson(Map json) : this(json['id'], json['title'], - image: json['image'] != null ? json['image'] : (json['images'] != null - ? json['images'][0] - : null)); + image: json['image'] != null ? json['image'] : (json['images'] != null ? json['images'][0] : null), + url: json['url'] != null ? json['url'] : (json['url'] != null ? json['url'][0] : null), + ); Map toJson() { return { 'id': id, 'title': title, - 'image': image + 'image': image, + 'url':url }; } } \ No newline at end of file diff --git a/lib/model/widget.dart b/lib/model/widget.dart index 5a1eaa5d..606f9d84 100644 --- a/lib/model/widget.dart +++ b/lib/model/widget.dart @@ -3,47 +3,60 @@ import 'dart:async'; import '../common/sql.dart'; import "package:flutter/material.dart"; -abstract class WidgetInterface{ - int get id; - //组件英文名 - String get name; - //组件中文名 - String get cnName; - //组件截图 - String get image; - //组件markdown 文档 - String get doc; - //类目 id - int get catId; +abstract class WidgetInterface { + int get id; + + //组件英文名 + String get name; + + //组件中文名 + String get cnName; + + //组件截图 + String get image; + + //组件markdown 文档 + String get doc; + + //类目 id + int get catId; } -class WidgetPoint implements WidgetInterface{ - int id; +class WidgetPoint implements WidgetInterface { + int id; + //组件英文名 - String name; + String name; + //组件中文名 - String cnName; + String cnName; + //组件截图 - String image; + String image; + // 路由地址 String routerName; + //组件markdown 文档 - String doc; + String doc; + //组件 demo ，多个以 , 分割 - String demo; + String demo; + //类目 id - int catId; + int catId; final WidgetBuilder buildRouter; - WidgetPoint({ - this.id, - this.name, - this.cnName, - this.image, - this.doc, - this.catId, - this.routerName, - this.buildRouter - }); + + WidgetPoint( + {this.id, + this.name, + this.cnName, + this.image, + this.doc, + this.catId, + this.routerName, + this.buildRouter}); + WidgetPoint.fromJSON(Map json) : id = json['id'], name = json['name'], @@ -53,6 +66,7 @@ class WidgetPoint implements WidgetInterface{ doc = json['doc'], catId = json['catId'], buildRouter = json['buildRouter']; + String toString() { return '(WidgetPoint $name)'; } @@ -67,13 +81,12 @@ class WidgetPoint implements WidgetInterface{ 'catId': catId }; } + Map toSqlCondition() { Map _map = this.toMap(); Map condition = {}; _map.forEach((k, value) { - if (value != null) { - condition[k] = value; } }); @@ -85,19 +98,23 @@ class WidgetPoint implements WidgetInterface{ return condition; } } -class WidgetControlModel{ + +class WidgetControlModel { final String table = 'widget'; Sql sql; + WidgetControlModel() { sql = Sql.setTable(table); } + // 获取Widget不同条件的列表 - Future> getList(WidgetPoint widgetPoint) async{ - List listJson = await sql.getByCondition(conditions: widgetPoint.toSqlCondition()); + Future> getList(WidgetPoint widgetPoint) async { + List listJson = + await sql.getByCondition(conditions: widgetPoint.toSqlCondition()); List widgets = listJson.map((json) { return new WidgetPoint.fromJSON(json); }).toList(); - print("widgets $widgets"); + // print("widgets $widgets"); return widgets; } @@ -109,4 +126,17 @@ class WidgetControlModel{ } return new WidgetPoint.fromJSON(json.first); } + Future> search(String name) async { + List json = await sql.search(conditions: {'name': name}); + + if (json.isEmpty) { + return []; + } + + List widgets = json.map((json) { + return new WidgetPoint.fromJSON(json); + }).toList(); + + return widgets; + } } diff --git a/lib/routers/application.dart b/lib/routers/application.dart index 35d7c1d4..05cba554 100644 --- a/lib/routers/application.dart +++ b/lib/routers/application.dart @@ -1,5 +1,13 @@ import 'package:fluro/fluro.dart'; - +import 'package:flutter/material.dart'; +import '../widgets/index.dart'; class Application { static Router router; + static TabController controller; + static Map github = { + 'widgetsURL':'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/tree/develop/lib/widgets/', + //'develop':'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/tree/develop/lib/widgets/', + //'master':'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/tree/master/lib/widgets/' + }; + } diff --git a/lib/routers/router_handler.dart b/lib/routers/router_handler.dart index 6fd8811e..fbff9c84 100644 --- a/lib/routers/router_handler.dart +++ b/lib/routers/router_handler.dart @@ -17,4 +17,4 @@ var widgetNotFoundHandler = new Handler( handlerFunc: (BuildContext context, Map> params) { return new WidgetNotFound(); } -); \ No newline at end of file +); diff --git a/lib/routers/routers.dart b/lib/routers/routers.dart index 7de61384..32d311f2 100644 --- a/lib/routers/routers.dart +++ b/lib/routers/routers.dart @@ -7,6 +7,7 @@ import './router_handler.dart'; class Routes { static String root = "/"; + static String widgetDemo = '/widget-demo'; static void configureRoutes(Router router) { List widgetDemosList = new WidgetDemoList().getDemos(); @@ -21,10 +22,13 @@ class Routes { widgetDemosList.forEach((demo) { Handler handler = new Handler( handlerFunc: (BuildContext context, Map> params) { + print('detail路由:${demo.buildRouter(context)}'); return demo.buildRouter(context); }); + + print('路由:${demo.routerName}'); + router.define('${demo.routerName}', handler: handler); }); - } } diff --git a/lib/views/FirstPage.dart b/lib/views/FirstPage.dart index b7fd3984..5b3d5700 100644 --- a/lib/views/FirstPage.dart +++ b/lib/views/FirstPage.dart @@ -1,12 +1,20 @@ import 'dart:async'; import 'package:flutter/material.dart'; -import 'package:flutter_rookie_book/components/List.dart'; +import 'package:flutter_rookie_book/common/myListView.dart'; +//import 'package:flutter_rookie_book/components/CompList.dart'; +import 'package:flutter_rookie_book/components/ListRefresh.dart' as listComp; import 'package:flutter_rookie_book/components/Pagination.dart'; +import './widgetFeature/FirstPageItem.dart'; +import '../common/net_utils.dart'; + +import 'package:flutter_rookie_book/common/iconNames.dart'; import '../common/sql.dart'; import 'dart:async'; +import 'package:url_launcher/url_launcher.dart'; + class FirstPage extends StatefulWidget { @override FirstPageState createState() => new FirstPageState(); @@ -19,6 +27,46 @@ class FirstPageState extends State { // TODO: implement initState super.initState(); } + + Future getIndexListData([Map params]) async { + const juejin_flutter = 'https://timeline-merger-ms.juejin.im/v1/get_tag_entry?src=web&tagId=5a96291f6fb9a0535b535438'; + var pageIndex = (params is Map) ? params['pageIndex'] : 0; + final _param = {'page':pageIndex,'pageSize':20,'sort':'rankIndex'}; + + var response = await NetUtils.get(juejin_flutter, params: _param); + var responseList = response['d']['entrylist']; + var pageTotal = response['d']['total']; + if (!(pageTotal is int) || pageTotal <= 0) { + pageTotal = 0; + } + pageIndex += 1; + List resultList = new List(); + for (int i = 0; i < responseList.length; i++) { + try { + FirstPageItem cellData = new FirstPageItem.fromJson(responseList[i]); + resultList.add(cellData); + } catch (e) { + // No specified type, handles all + print('Something really unknown: $i'); + } + } + Map result = {"list":resultList, 'total':pageTotal, 'pageIndex':pageIndex}; + return result; + } + + Widget makeCard(index,item){ + const emojis = ['👲']; + var smallParts_Color = Colors.primaries[index % Colors.primaries.length]; + var smallParts_icon = IconNames.Names[index % IconNames.Names.length]; + var smallParts_emojis = IconNames.Names[index % IconNames.Names.length]; + + var myTitle = '${item.title}'; + var myUsername = '${'👲'}: ${item.username} '; + var codeUrl = '${item.detailUrl}'; + + return new MyListView(currCodeUrl:codeUrl,currTitle: myTitle,developer: myUsername,); + } + @override Widget build(BuildContext context) { return new Column( @@ -26,8 +74,10 @@ class FirstPageState extends State { new Container( child: new Pagination(), ), + SizedBox(height: 2, child:Container(color: Theme.of(context).primaryColor)), new Expanded( - child: new List(), + //child: new List(), + child: listComp.ListRefresh(getIndexListData,makeCard) ), ] diff --git a/lib/views/FourthPage.dart b/lib/views/FourthPage.dart index f022194b..37aa6cd4 100644 --- a/lib/views/FourthPage.dart +++ b/lib/views/FourthPage.dart @@ -1,7 +1,7 @@ import 'dart:async'; import 'package:flutter/material.dart'; -import '../components/List.dart'; +import '../components/CompList.dart'; class FourthPage extends StatefulWidget { @@ -14,7 +14,7 @@ class FourthPageState extends State { @override Widget build(BuildContext context) { return new Container( - child: new List() + child: new CompList() ); } } diff --git a/lib/views/ThirdPage.dart b/lib/views/ThirdPage.dart index 3b49594f..dfeb8605 100644 --- a/lib/views/ThirdPage.dart +++ b/lib/views/ThirdPage.dart @@ -40,6 +40,7 @@ class ThirdPageState extends State { @override Widget build(BuildContext context) { + print('===========>>>:123123123123'); return new Center( child: new Column(children: [ new Container( diff --git a/lib/views/category.dart b/lib/views/category.dart index c5f42052..8feee805 100644 --- a/lib/views/category.dart +++ b/lib/views/category.dart @@ -1,14 +1,14 @@ +import 'dart:async'; + import 'package:flutter/material.dart'; import '../routers/application.dart'; import '../model/cat.dart'; import '../model/widget.dart'; import '../widgets/index.dart'; +import '../components/widget_item_container.dart'; +enum CateOrWigdet { Cat, WidgetDemo } -enum CateOrWigdet { - Cat, - WidgetDemo -} class CategoryHome extends StatefulWidget { CategoryHome(this.name); final String name; @@ -42,6 +42,7 @@ class _CategoryHome extends State { Future getCatByName(String name) async { return await catControl.getCatByName(name); } + Future back() { if (catHistory.length == 1) { return Future.value(true); @@ -49,12 +50,13 @@ class _CategoryHome extends State { catHistory.removeLast(); searchCatOrWigdet(); return Future.value(false); - } + void go(Cat cat) { catHistory.add(cat); searchCatOrWigdet(); } + void searchCatOrWigdet() async { // 假设进入这个界面的parent一定存在 Cat parentCat = catHistory.last; @@ -62,27 +64,31 @@ class _CategoryHome extends State { int depth = catHistory.length; // 继续搜索显示下一级depth: depth + 1, parentId: parentCat.id - List _categories = await catControl.getList(new Cat(parentId: parentCat.id, depth: depth + 1)); + List _categories = + await catControl.getList(new Cat(parentId: parentCat.id)); List _widgetPoints = new List(); if (_categories.isEmpty) { - _widgetPoints = await widgetControl.getList(new WidgetPoint(catId: parentCat.id)); + _widgetPoints = + await widgetControl.getList(new WidgetPoint(catId: parentCat.id)); } - this.setState(() { categories = _categories; - title = parentCat.name; + title = parentCat.name; widgetPoints = _widgetPoints; }); } void onCatgoryTap(Cat cat) { - go(cat); + go(cat); } + void onWidgetTap(WidgetPoint widgetPoint) { String targetName = widgetPoint.name; String targetRouter = '/category/error/404'; + print("widgetDemosList> ${widgetDemosList}"); widgetDemosList.forEach((item) { + // print("targetRouter = item.routerName> ${[item.name,targetName]}"); if (item.name == targetName) { targetRouter = item.routerName; } @@ -91,161 +97,49 @@ class _CategoryHome extends State { Application.router.navigateTo(context, "${targetRouter}"); } - @override - Widget build(BuildContext context) { - - return Scaffold( - appBar: AppBar( - title: Text(title), - ), - body: WillPopScope( - onWillPop: () { - return back(); - }, - child: new Container( - child: new CategoryOrWidgetList( - categorys: categories, - widgetPoints: widgetPoints, - onCatgoryTap: onCatgoryTap, - onWidgetTap: onWidgetTap - ), - ) - ) + Widget _buildContent() { + WidgetItemContainer wiContaienr = WidgetItemContainer( + columnCount: 3, + categories: categories, + isWidgetPoint:false ); - } -} - - - -class CategoryOrWidgetList extends StatelessWidget { - - List categorys = []; - List widgetPoints = []; - - var onCatgoryTap; - var onWidgetTap; - CategoryOrWidgetList({ - this.categorys, - this.widgetPoints, - this.onCatgoryTap, - this.onWidgetTap, - }); - - Widget build(BuildContext context) { - print("categorys $categorys"); - return GridView.builder( - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 2, //每行2个 - mainAxisSpacing: 0.0, //主轴(竖直)方向间距 - crossAxisSpacing: 0.0, //纵轴(水平)方向间距 - childAspectRatio: 0.8 //纵轴缩放比例 + if (widgetPoints.length > 0) { + wiContaienr = WidgetItemContainer( + categories: widgetPoints, + columnCount: 3, + isWidgetPoint:true + ); + } + return Container( + padding: const EdgeInsets.only(bottom: 10.0, top: 5.0), + decoration: BoxDecoration( + color: Colors.white, + image: DecorationImage( + image: AssetImage('assets/images/paimaiLogo.png'), + alignment: Alignment.bottomRight), ), - itemCount: widgetPoints.length == 0 ? categorys.length : widgetPoints.length, - itemBuilder: (BuildContext context, int index) { - if (widgetPoints.length > 0) { - return new ListItemWidget( - widgetPoint: widgetPoints[index], - onTap: () { - onWidgetTap(widgetPoints[index]); - }, - ); - } - return new ListCatWidget( - cat: categorys[index], - onTap: () { - onCatgoryTap(categorys[index]); - }, - ); - }, + child: wiContaienr, ); } -} - - - -class ListCatWidget extends StatelessWidget { - final Cat cat; - final VoidCallback onTap; - - ListCatWidget({ - this.cat, - this.onTap - }); @override Widget build(BuildContext context) { - return new Container( - color: Colors.green, - child: Container( - decoration: new BoxDecoration( - color: Colors.white, - border: Border( - right: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)), - bottom: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)), - ), - ), - child: new RaisedButton( - onPressed: () { - onTap(); - }, - child: new Column( - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.max, - children: [ - Icon( - Icons.add - ), - Text(cat.name), - ], - ) - ) - ) + return Scaffold( + appBar: AppBar( + title: Text(title), + ), + body: WillPopScope( + onWillPop: () { + return back(); + }, + child: ListView( + children: [ + _buildContent(), + ], + ), + // child: Container(color: Colors.blue,child: Text('123'),), + ), ); } } - -class ListItemWidget extends StatelessWidget { - final WidgetPoint widgetPoint; - final VoidCallback onTap; - - ListItemWidget({ - this.widgetPoint, - this.onTap - }); - - @override - Widget build(BuildContext context) { - return new Container( - color: Colors.green, - child: Container( - decoration: new BoxDecoration( - color: Colors.white, - border: Border( - right: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)), - bottom: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)), - ), - ), - child: new RaisedButton( - onPressed: () { - onTap(); - }, - child: new Column( - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.max, - children: [ - Icon( - Icons.add - ), - Text(widgetPoint.name), - ], - ) - ) - ) - ); - } -} - - - - diff --git a/lib/views/widgetFeature/FirstPageItem.dart b/lib/views/widgetFeature/FirstPageItem.dart new file mode 100644 index 00000000..f91ffd09 --- /dev/null +++ b/lib/views/widgetFeature/FirstPageItem.dart @@ -0,0 +1,51 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2019/1/5 + * Time: 下午10:20 + * email: zhu.yan@alibaba-inc.com + * tartget: FirstPageItem + */ + +import '../../common/Util.dart'; + +class FirstPageItem { + bool hot; + String isCollection; + String tag; + String username; + int collectionCount; + int commentCount; + String title; + String createdTime; + String detailUrl; + + FirstPageItem( + {this.hot, + this.tag, + this.username, + this.collectionCount, + this.createdTime, + this.commentCount, + this.title, + this.detailUrl, + this.isCollection}); + + factory FirstPageItem.fromJson(Map json) { + String _tag = ''; + if(json['tags'].length>0){ + _tag = '${json['tags'][0]['title']}/'; + } + return FirstPageItem( + hot: json['hot'], + collectionCount: json['collectionCount'], + commentCount: json['commentsCount'], + tag: '$_tag${json['category']['name']}', + username: json['user']['username'], + createdTime: Util.getTimeDuration(json['createdAt']), + title: json['title'], + detailUrl: json['originalUrl'], + isCollection: json['type'] , + ); + } +} \ No newline at end of file diff --git a/lib/views/widgetPage.dart b/lib/views/widgetPage.dart index ea03afa0..d87d4bef 100644 --- a/lib/views/widgetPage.dart +++ b/lib/views/widgetPage.dart @@ -1,19 +1,13 @@ - - - import 'package:flutter/material.dart'; -import '../routers/application.dart'; +import 'widgetPage/cate_card.dart'; import '../model/cat.dart'; -import '../widgets/index.dart'; - - - - class WidgetPage extends StatefulWidget { final db; final CatControlModel catModel; - WidgetPage(this.db): catModel = new CatControlModel(),super(); + WidgetPage(this.db) + : catModel = new CatControlModel(), + super(); @override SecondPageState createState() => new SecondPageState(catModel); @@ -21,23 +15,22 @@ class WidgetPage extends StatefulWidget { class SecondPageState extends State { CatControlModel catModel; - SecondPageState(this.catModel): super(); + SecondPageState(this.catModel) : super(); TextEditingController controller; - String active = 'test'; + String active = 'test'; String data = '无'; List categories = []; - - void initState() { + void initState() { + super.initState(); renderCats(); } - - void renderCats(){ - catModel.getList().then((List data){ - if(data.isNotEmpty){ + void renderCats() { + catModel.getList().then((List data) { + if (data.isNotEmpty) { setState(() { categories = data; }); @@ -45,26 +38,28 @@ class SecondPageState extends State { }); } + Widget buildGrid() { + // 存放最后的widget + List tiles = []; + Widget content; + for (Cat item in categories) { + tiles.add(new CateCard(category: item)); + } + return new ListView( + children: tiles, + ); + } @override Widget build(BuildContext context) { if (categories.length == 0) { - return new Container(); + return ListView( + children: [new Container()], + ); } - print("categories in widgetPage : ${categories[0]}"); - return GridView.builder( - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 2, //每行2个 - mainAxisSpacing: 0.0, //主轴(竖直)方向间距 - crossAxisSpacing: 0.0, //纵轴(水平)方向间距 - childAspectRatio: 0.8 //纵轴缩放比例 - ), - itemCount: categories.length, - itemBuilder: (BuildContext context, int index) { - return new ListItemWidget( - category: categories[index], - ); - }, + return Container( + color: Theme.of(context).backgroundColor, + child: this.buildGrid(), ); } @@ -75,45 +70,3 @@ class SecondPageState extends State { }); } } - - -class ListItemWidget extends StatelessWidget { - - final Cat category; - - ListItemWidget({this.category}); - - @override - Widget build(BuildContext context) { - return new Container( - color: Colors.green, - child: Container( - decoration: new BoxDecoration( - color: Colors.white, - border: Border( - right: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)), - bottom: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)), - ), - ), - child: new RaisedButton( - onPressed: () { - Application.router.navigateTo(context, "/category/${category.name}"); -// Application.router.navigateTo(context, "/category/${category.name}"); - }, - child: new Column( - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.max, - children: [ - Icon( - Icons.add, - ), - Text(category.name), - ], - ) - ) - ) - ); - } -} - - diff --git a/lib/views/widgetPage/cate_card.dart b/lib/views/widgetPage/cate_card.dart new file mode 100644 index 00000000..51c49697 --- /dev/null +++ b/lib/views/widgetPage/cate_card.dart @@ -0,0 +1,127 @@ +import 'package:flutter/material.dart'; +import '../../model/cat.dart'; +import '../../common/widget_name_to_icon.dart'; +import '../../components/widget_item_container.dart'; + +class CateCard extends StatefulWidget { + final Cat category; + CateCard({@required this.category}); + @override + _CateCardState createState() => _CateCardState(); +} + +class _CateCardState extends State { + // 一级菜单目录下的二级Cat集合 + List _firstChildList = new List(); + CatControlModel catControl = new CatControlModel(); + + @override + void initState() { + super.initState(); + getFirstChildCategoriesByParentId(); + } + + // 获取一层目录下的二级内容 + getFirstChildCategoriesByParentId() async { + int parentId = widget.category.id; + // 构建查询条件 + Cat childCateCondition = new Cat(parentId: parentId); + + List list = await catControl.getList(childCateCondition); + if (list.isNotEmpty&&list.length>=1) { + setState(() { + _firstChildList = list; + }); + } + } + + @override + Widget build(BuildContext context) { + double screenWidth = MediaQuery.of(context).size.width; + widget.category.name = widget.category.name.replaceFirst( + //首字母转为大写 + widget.category.name.substring(0, 1), + widget.category.name.substring(0, 1).toUpperCase()); + + return Container( + width: screenWidth, + padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0), + child: Stack( + children: [ + Container( + width: screenWidth - 20, + margin: const EdgeInsets.only(top: 30.0, bottom: 0.0), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(4.0), + ), + child: Column( + children: [ + Container( + width: screenWidth - 20, + padding: const EdgeInsets.only(left: 65.0, top: 3.0), + height: 30.0, + child: Text( + widget.category.name, + style: TextStyle( + color: Theme.of(context).primaryColor, + fontSize: 18.0, + ), + ), + ), + _buildWidgetContainer(), + ], + ), + ), + Positioned( + left: 0.0, + top: 0.0, + child: Container( + height: 60.0, + width: 60.0, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(30.0), + ), + child: Center( + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).primaryColor, + borderRadius: BorderRadius.circular(23.0), + ), + height: 46.0, + width: 46.0, + child: Icon( + WidgetName2Icon.icons[widget.category.name], + color: Colors.white, + size: 30.0, + ), + ), + ), + ), + ) + ], + ), + ); + } + + Widget _buildWidgetContainer() { + if (this._firstChildList.length == 0) { + return Container(); + } + return Container( + padding: const EdgeInsets.only(bottom: 10.0, top: 5.0), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage('assets/images/paimaiLogo.png'), + alignment: Alignment.bottomRight + ), + ), + child: WidgetItemContainer( + categories: this._firstChildList, + columnCount: 3, + isWidgetPoint:false + ), + ); + } +} diff --git a/lib/widgets/elements/Form/Button/DropdownButton/demo.dart b/lib/widgets/elements/Form/Button/DropdownButton/demo.dart new file mode 100644 index 00000000..06eeacd2 --- /dev/null +++ b/lib/widgets/elements/Form/Button/DropdownButton/demo.dart @@ -0,0 +1,143 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: DropdownButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* DropdownButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +class DropdownButtonDefault extends StatelessWidget { + List generateItemList() { + List items = new List(); + DropdownMenuItem item1 = new DropdownMenuItem( + value: '张三', child: new Text('张三')); + DropdownMenuItem item2 = new DropdownMenuItem( + value: '李四', child: new Text('李四')); + DropdownMenuItem item3 = new DropdownMenuItem( + value: '王二', child: new Text('王二')); + DropdownMenuItem item4 = new DropdownMenuItem( + value: '麻子', child: new Text('麻子')); + items.add(item1); + items.add(item2); + items.add(item3); + items.add(item4); + return items; + } + + var selectItemValue; + + @override + Widget build(BuildContext context) { + return DropdownButton( + hint: new Text('下拉菜单选择一个人名'), + //设置这个value之后,选中对应位置的item， + //再次呼出下拉菜单，会自动定位item位置在当前按钮显示的位置处 + value: selectItemValue, + items: generateItemList(), + onChanged: (T){ +// setState(() { +// selectItemValue=T; +// }); + }, + ); + } +} + +List getListData(){ + List items=new List(); + DropdownMenuItem dropdownMenuItem1=new DropdownMenuItem( + child:new Text('1'), + value: '1', + ); + items.add(dropdownMenuItem1); + DropdownMenuItem dropdownMenuItem2=new DropdownMenuItem( + child:new Text('2'), + value: '2', + ); + items.add(dropdownMenuItem2); + DropdownMenuItem dropdownMenuItem3=new DropdownMenuItem( + child:new Text('3'), + value: '3', + ); + items.add(dropdownMenuItem3); + DropdownMenuItem dropdownMenuItem4=new DropdownMenuItem( + child:new Text('4'), + value: '4', + ); + items.add(dropdownMenuItem4); + DropdownMenuItem dropdownMenuItem5=new DropdownMenuItem( + child:new Text('5'), + value: '5', + ); + items.add(dropdownMenuItem5); + DropdownMenuItem dropdownMenuItem6=new DropdownMenuItem( + child:new Text('6'), + value: '6', + ); + items.add(dropdownMenuItem6); + DropdownMenuItem dropdownMenuItem7=new DropdownMenuItem( + child:new Text('7'), + value: '7', + ); + items.add(dropdownMenuItem7); + DropdownMenuItem dropdownMenuItem8=new DropdownMenuItem( + child:new Text('8'), + value: '8', + ); + items.add(dropdownMenuItem8); + DropdownMenuItem dropdownMenuItem9=new DropdownMenuItem( + child:new Text('9'), + value: '9', + ); + items.add(dropdownMenuItem9); + DropdownMenuItem dropdownMenuItem10=new DropdownMenuItem( + child:new Text('10'), + value: '10', + ); + items.add(dropdownMenuItem10); + return items; +} +var selectItemValue; + +/* +* DropdownButton 自定义的实例 +* */ +class DropdownButtonCustom extends StatelessWidget { + final widget; + final parent; + const DropdownButtonCustom([this.widget,this.parent]) + : super(); + + @override + Widget build(BuildContext context) { + return DropdownButton( + items: getListData(), + //当没有默认值的时候可以设置的提示 + hint:Text('下拉选择你想要的数据'), + //下拉菜单选择完之后显示给用户的值 + value: selectItemValue, + //下拉菜单item点击之后的回调 + onChanged: (T){ + parent.setState((){ + selectItemValue = T; + }); + }, + //设置阴影的高度 + elevation: 24, + style: TextStyle(//设置文本框里面文字的样式 + color: Colors.red + ), + // isDense: true,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用 + // 将下拉列表的内部内容设置为水平填充其父级 + isExpanded:true, + iconSize: 50.0,//设置三角标icon的大小 + ); + } +} diff --git a/lib/widgets/elements/Form/Button/DropdownButton/index.dart b/lib/widgets/elements/Form/Button/DropdownButton/index.dart new file mode 100644 index 00000000..24fc4ce9 --- /dev/null +++ b/lib/widgets/elements/Form/Button/DropdownButton/index.dart @@ -0,0 +1,102 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: DropdownButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/DropdownButton-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; + +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as dropdownButton; + + +const String _dropdownText0 = +"""### **简介** +> Dropdown button “用于从项目列表中进行选择的按钮” +- 类型T是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常，使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法。。 +"""; + +const String _dropdownText1 = +"""### **基本用法** +> 此示例显示一个包含四个项目的菜单 +"""; + +const String _dropdownText2 = +"""### **进阶用法** +> 此示例尝试调整所有属性，展示出效果 +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Button/DropdownButton'; + + @override + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + //String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + //buttonShapeType = _buttonShapeType; + }); + } + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'DropdownButton', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/DropdownButton/demo.dart', + child: allDropdownButtons(context,this), + docUrl: 'https://docs.flutter.io/flutter/material/DropdownButton-class.html', + ); + } +} + +/** + * 所有的 DropdownButton 按钮 + */ +Widget allDropdownButtons(BuildContext context,_DemoState that){ + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _dropdownText0), + textAlignBar(_dropdownText1), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + dropdownButton.DropdownButtonDefault(), + ], + ), + textAlignBar(_dropdownText2), + SizedBox(height: 10.0), + dropdownButton.DropdownButtonCustom(context.widget,that), + SizedBox(height: 20.0) + ]) + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} + diff --git a/lib/widgets/elements/Form/Button/FlatButton/demo.dart b/lib/widgets/elements/Form/Button/FlatButton/demo.dart new file mode 100644 index 00000000..106bd912 --- /dev/null +++ b/lib/widgets/elements/Form/Button/FlatButton/demo.dart @@ -0,0 +1,129 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: FlatButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* FlatButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +class FlatButtonDefault extends StatelessWidget { + final bool isDisabled; + + const FlatButtonDefault([bool this.isDisabled = true]) + : assert(isDisabled != null), + super(); + + @override + Widget build(BuildContext context) { + return FlatButton( + // 文本内容 + child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'), + onPressed: isDisabled ? () {} : null); + } +} + +/* +* FlatButton.icon 默认按钮的实例 +* Create a text button from a pair of widgets that serve as the button's icon and label +* isDisabled:是否是禁用 +* */ +class FlatButtonIconDefault extends StatelessWidget { + final bool isDisabled; + final IconData icon; + + const FlatButtonIconDefault( + [bool this.isDisabled = true, IconData this.icon = Icons.add_circle]) + : super(); + + Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); + } + + @override + Widget build(BuildContext context) { + return FlatButton.icon( + // 文本内容 + icon: Icon(icon, size: 25.0, color: _randomColor()), + label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'), + onPressed: isDisabled + ? () { + //_showMessage('点击了 FLAT BUTTON ', context); + } + : null); + } +} + +/* +* FlatButton 自定义的实例 +* */ +class FlatButtonCustom extends StatelessWidget { + final String txt; + final Color color; + final ShapeBorder shape; + final VoidCallback onPressed; + + const FlatButtonCustom([ + String this.txt = '自定义按钮', + Color this.color = Colors.blueAccent, + ShapeBorder this.shape, + VoidCallback this.onPressed + ]) :super(); + + @override + Widget build(BuildContext context) { + final _onPressed = onPressed; + return FlatButton( + // 文本内容 + child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'), + // 按钮颜色 + color: color, + // 按钮亮度 + colorBrightness: Brightness.dark, + // 高亮时的背景色 + //highlightColor: Colors.yellow, + // 失效时的背景色 + disabledColor: Colors.grey, + // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用 + textColor: Colors.white, + // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用 + disabledTextColor: Colors.grey, + // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,RaisedButton，FlatButton，OutlineButton，它们是基于环境ButtonTheme配置的 + //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor. + textTheme: ButtonTextTheme.normal, + // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚 + splashColor: Colors.deepPurple, + // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias + clipBehavior: Clip.antiAlias, + padding: new EdgeInsets.only( + bottom: 5.0, top: 5.0, left: 30.0, right: 30.0), + shape: (shape is ShapeBorder) ? shape : new Border.all( + // 设置边框样式 + color: Colors.grey, + width: 2.0, + style: BorderStyle.solid, + ), + // FlatButton 的点击事件 + onPressed: () { + // Perform some action + if (_onPressed is VoidCallback) { + _onPressed(); + } + }, + // 改变高亮颜色回掉函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次 + // 参数 bool，按下后true，恢复false + onHighlightChanged: (isClick) { + print(isClick); + } + ); + } +} diff --git a/lib/widgets/elements/Form/Button/FlatButton/index.dart b/lib/widgets/elements/Form/Button/FlatButton/index.dart index f18f4cbc..adbb3b5b 100644 --- a/lib/widgets/elements/Form/Button/FlatButton/index.dart +++ b/lib/widgets/elements/Form/Button/FlatButton/index.dart @@ -1,20 +1,189 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: FlatButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/FlatButton-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; import 'package:flutter/material.dart'; +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as flatButton; + +const String _markdownData = """# Markdown Example +Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app. +## Styling +Style text as _italic_, __bold__, or `inline code`. +- Use bulleted lists +- To better clarify +- Your points +## Links +You can use [hyperlinks](hyperlink) in markdown +## Images +You can include images: +![Flutter logo](https://flutter.io/images/flutter-mark-square-100.png#100x100) +## Markdown widget +This is an example of how to create your own Markdown widget: + new Markdown(data: 'Hello _world_!'); +## Code blocks +Formatted Dart code looks really pretty too: +``` +void main() { + runApp(new MaterialApp( + home: new Scaffold( + body: new Markdown(data: markdownData) + ) + )); +} +``` +Enjoy! +"""; + + +const String _flatText0 = +"""### **简介** +> Flat button 是显示在（零高程）material widget上的文本标签 +- 通过填充颜色对触摸作出反应在工具栏上， +- 在对话框中使用Flat button，或与其他内容内联，但使用填充从该内容偏移，以便按钮的存在是显而易见的。 +- Flat buttons 故意不具有可见边框，因此必须依赖于它们相对于其他内容的位置以用于上下文。 +- 在对话框和卡片中，它们应该组合在一个底角中。避免使用平面按钮，它们会与其他内容混合，例如在列表中间。"""; + +const String _flatText1 = +"""### **基本用法** +> 参数的默认的按钮和禁用按钮 +- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。 +- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。"""; + + +const String _flatText2 = +"""### **进阶用法1** +> FlatButton.icon，按钮图标和标签的widget创建文本按钮。"""; + +const String _flatText3 = +"""### **进阶用法2** +> 更改项参数的自定义,比如:边框，点击效果，内容文字颜色等 +- Material design Flat buttons 按钮具有全帽标签，一些内部填充和一些定义的尺寸。 +- 要使应用程序的一部分具有交互式，使用墨水溅，而不是承诺这些样式选择，请考虑使用InkWell。 +- Flat button 的最小尺寸为88.0×36.0，可以用 ButtonTheme 覆盖。该clipBehavior参数不能为空。"""; + class Demo extends StatefulWidget { static const String routeName = '/element/Form/Button/FlatButton'; - _Demo createState() => _Demo(); + + @override + _DemoState createState() => _DemoState(); } -class _Demo extends State { +class _DemoState extends State { + @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text("FlatButton"), - ), - body: Container( - child: RaisedButton(onPressed: () {}, child: Text("FlatButton")) - ) + return WidgetDemo( + title: 'FlatButton', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/FlatButton/demo.dart', + child: allFlatButtons(context), + docUrl: 'https://docs.flutter.io/flutter/material/FlatButton-class.html', ); - } } + +/** + * 所有的 FlatButton 按钮 + */ +Widget allFlatButtons(BuildContext context){ + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _flatText0), + textAlignBar(_flatText1), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + flatButton.FlatButtonDefault(), + SizedBox(width: 20.0), // 间距 + flatButton.FlatButtonDefault(false), + ], + ), + textAlignBar(_flatText2), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + //mainAxisSize: MainAxisSize.min, + children: [ + flatButton.FlatButtonIconDefault(), + flatButton.FlatButtonIconDefault(false), + ], + ), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + //mainAxisSize: MainAxisSize.min, + children: [ + flatButton.FlatButtonIconDefault(true, Icons.android), + flatButton.FlatButtonIconDefault(true, Icons.announcement), + ], + ), + textAlignBar(_flatText3), + //flatButton.FlatButtonCustom(context,'主要按钮',Colors.blue), + flatButton.FlatButtonCustom('主要按钮',Colors.blue), + SizedBox(height: 10.0), + flatButton.FlatButtonCustom('成功按钮',Colors.green), + SizedBox(height: 10.0), + flatButton.FlatButtonCustom('信息按钮',Colors.grey), + SizedBox(height: 10.0), + flatButton.FlatButtonCustom('警告按钮',Colors.orange), + SizedBox(height: 10.0), + flatButton.FlatButtonCustom('危险按钮',Colors.pink), + SizedBox(height: 10.0), + flatButton.FlatButtonCustom('点击我试试！', Colors.red, + new Border.all(color: Colors.brown, width: 5.0, style: BorderStyle.solid), + () => _showMessage('点击了 FLAT BUTTON ', context)), + SizedBox(height: 20.0) + ]) + ); +} + +/* + * alert 弹框 + * context:容器的父级 + * */ +void _showMessage(String name, BuildContext context) { + showDialog( + // alert 的父级 + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: new Text('提示'), + content: new Text(name), + actions: [ + new FlatButton( + // alert 的取消按钮 + onPressed: () { + // 取消的事件 + Navigator.of(context).pop(true); + }, + child: new Text('取消')) + ]); + } + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} diff --git a/lib/widgets/elements/Form/Button/FloatingActionButton/demo.dart b/lib/widgets/elements/Form/Button/FloatingActionButton/demo.dart new file mode 100644 index 00000000..ecf373aa --- /dev/null +++ b/lib/widgets/elements/Form/Button/FloatingActionButton/demo.dart @@ -0,0 +1,117 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: OutlineButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* OutlineButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +class FloatingActionButtonDefault extends StatelessWidget { + final bool isDisabled; + + const FloatingActionButtonDefault([bool this.isDisabled = true]) + : assert(isDisabled != null), + super(); + + @override + Widget build(BuildContext context) { + return FloatingActionButton( + // 文本内容 + backgroundColor:Colors.red, + child: const Icon(Icons.add), + heroTag: null, // 不加这个参数会黑屏... + onPressed: isDisabled ? () {} : null); + } +} + +/* +* OutlineButton 自定义的实例 +* */ +class FloatingActionButtonCustom extends StatelessWidget { + final String txt; + final Color color; + final ShapeBorder shape; + final VoidCallback onPressed; + + const FloatingActionButtonCustom( + [String this.txt = '自定义按钮', + Color this.color = Colors.orange, + ShapeBorder this.shape, + VoidCallback this.onPressed]) + : super(); + + @override + Widget build(BuildContext context) { + final _onPressed = onPressed; + return new FloatingActionButton( + // 子视图，一般为Icon，不推荐使用文字 + child: const Icon(Icons.refresh), + // FAB的文字解释，FAB被长按时显示，也是无障碍功能 + tooltip: txt, + // 前景色 + foregroundColor: Colors.white, + // 背景色 + backgroundColor: color, + // hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果,简单理解为两个界面内拥有同样tag的元素在界面切换过程中，会有动画效果，是界面切换不再那么生硬。 + heroTag: null, + // 未点击时阴影值，默认6.0 + elevation: 7.0, + // 点击时阴影值，默认12.0 + highlightElevation: 14.0, + // 点击事件回调 + onPressed: () { + Scaffold.of(context).showSnackBar( SnackBar( + content: Text("FAB is Clicked"), + )); + _onPressed(); + }, + // 是否为“mini”类型，默认为false,FAB 分为三种类型：regular, mini, and extended + mini: false, + // 定义FAB的shape，设置shape时，默认的elevation将会失效,默认为CircleBorder + //shape: CircleBorder(), + shape: shape, + // 是否为”extended”类型 + isExtended: true + ); + } +} + +/* +* OutlineButton 自定义的实例2 +* */ +class FloatingActionButtonCustom2 extends StatelessWidget { + final String txt; + final Color color; + final ShapeBorder shape; + final VoidCallback onPressed; + + const FloatingActionButtonCustom2( + [String this.txt = '自定义按钮', + Color this.color = Colors.orange, + ShapeBorder this.shape, + VoidCallback this.onPressed]) + : super(); + + @override + Widget build(BuildContext context) { + final _onPressed = onPressed; + return FloatingActionButton.extended( + onPressed: () { + print('button click'); + _onPressed(); + }, + foregroundColor: Colors.white, + backgroundColor: Colors.amber, + //如果不手动设置icon和text颜色,则默认使用foregroundColor颜色 + icon: new Icon(Icons.flag,color: Colors.red), + label: new Text('FloatingActionButton.extended', maxLines: 1), + ); + } +} diff --git a/lib/widgets/elements/Form/Button/FloatingActionButton/index.dart b/lib/widgets/elements/Form/Button/FloatingActionButton/index.dart new file mode 100644 index 00000000..6afa2f11 --- /dev/null +++ b/lib/widgets/elements/Form/Button/FloatingActionButton/index.dart @@ -0,0 +1,193 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: FloatingActionButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/FloatingActionButton-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; + +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as floatingActionButton; + +const String _floatingActionTitle = + 'FloatingAction Button 示例'; + +const String _floatingActionText0 = +"""### **简介** +> FloatingAction Button “浮动动作按钮” +- FloatingActionButton 按钮是一个圆形图标按钮，悬停在内容上以提升应用程序中的主要操作。浮动操作按钮最常用于Scaffold.floatingActionButton字段中。。 +- 每个屏幕最多使用一个浮动操作按钮。浮动操作按钮应用于积极操作，例如“创建”，“共享”或“导航”。 +- 一般用来处理界面中最常用，最基础的用户动作。它一般出现在屏幕内容的前面，通常是一个圆形，中间有一个图标。 FAB有三种类型：regular, mini, and extended。不要强行使用FAB，只有当使用场景符合FAB功能的时候使用才最为恰当 +"""; + +const String _floatingActionText1 = +"""### **基本用法** +> 默认参数的按钮和禁用按钮 +- 如果onPressed回调为null，则该按钮将被禁用，并且不会对触摸作出反应,不会变成灰色。 +"""; + +const String _floatingActionText2 = +"""### **进阶用法1** +> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等 +"""; + +const String _floatingActionText3 = +"""### **进阶用法2** +> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等 +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Button/FloatingActionButton'; + + @override + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + buttonShapeType = _buttonShapeType; + }); + } + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'FloatingActionButton', + // desc: _floatingActionTitle, + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/FloatingActionButton/demo.dart', + child: allFloatingActionButtons(context,this), + //child: Text('123'), + docUrl: 'https://docs.flutter.io/flutter/material/FloatingActionButton-class.html', + ); + } +} + +/** + * 所有的 FloatingActionButton 按钮 + */ +Widget allFloatingActionButtons(BuildContext context,_DemoState that){ + final ShapeBorder buttonShape = drawShape(that.buttonShapeType); + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _floatingActionText0), + textAlignBar(_floatingActionText1), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + floatingActionButton.FloatingActionButtonDefault(), + SizedBox(width: 20.0), // 间距 + floatingActionButton.FloatingActionButtonDefault(false), + ], + ), + textAlignBar(_floatingActionText2), + SizedBox(height: 10.0), + floatingActionButton.FloatingActionButtonCustom('主要按钮',Colors.deepOrangeAccent,buttonShape), + SizedBox(height: 20.0), + textAlignBar(_floatingActionText3), + SizedBox(height: 20.0), + floatingActionButton.FloatingActionButtonCustom2('扩展按钮',Colors.deepOrangeAccent,buttonShape), + SizedBox(height: 20.0) + ]) + ); +} + +/* + * alert 弹框 + * context:容器的父级 + * */ +void _showMessage(String name, BuildContext context) { + showDialog( + // alert 的父级 + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: new Text('提示'), + content: new Text(name), + actions: [ + new FlatButton( + // alert 的取消按钮 + onPressed: () { + // 取消的事件 + Navigator.of(context).pop(true); + }, + child: new Text('取消')) + ]); + } + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} + +/* +* 绘制边框信息,比如是否有边框,是否是圆角 +* */ +ShapeBorder drawShape(String type){ + final Color _color = _randomColor(); + final borderWidth = Random.secure().nextInt(5).toDouble(); + final radiusWidth = Random.secure().nextInt(50).toDouble(); + + switch(type){ + case 'border': + return Border.all( + // 设置边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ); + break; + case 'radius': + return RoundedRectangleBorder( + side:new BorderSide( // 保留原来的边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ), + borderRadius: BorderRadius.only( + topRight: Radius.circular(radiusWidth), + topLeft: Radius.circular(radiusWidth), + bottomLeft: Radius.circular(radiusWidth), + bottomRight: Radius.circular(radiusWidth), + ), + ); + break; + default: + return null; + } +} + +/* +* 取随机颜色 +* */ +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} + diff --git a/lib/widgets/elements/Form/Button/IconButton/demo.dart b/lib/widgets/elements/Form/Button/IconButton/demo.dart new file mode 100644 index 00000000..62be1b02 --- /dev/null +++ b/lib/widgets/elements/Form/Button/IconButton/demo.dart @@ -0,0 +1,94 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: IconButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:flutter_rookie_book/common/iconNames.dart'; + +final int len = IconNames.Names.length; + +/* +* IconButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +class IconButtonDefault extends StatelessWidget { + final bool isDisabled; + + const IconButtonDefault([bool this.isDisabled = true]) + : assert(isDisabled != null), + super(); + + @override + Widget build(BuildContext context) { + return IconButton( + // 文本内容 + icon: Icon(Icons.volume_up), + tooltip: 'Increase volume by 10%', + onPressed: isDisabled ? () {} : null); + } +} + +/* +* IconButton 自定义的实例 +* */ +class IconButtonCustom extends StatelessWidget { + final String txt; + final Color color; + final ShapeBorder shape; + final VoidCallback onPressed; + + const IconButtonCustom( + [String this.txt = '自定义按钮', + Color this.color = Colors.blueAccent, + ShapeBorder this.shape, + VoidCallback this.onPressed]) + : super(); + + getIcons(){ + return Icons; + } + + @override + Widget build(BuildContext context) { + final int iconIndex = Random.secure().nextInt(len); + final IconData type = IconNames.Names[iconIndex]; + final _onPressed = onPressed; + return IconButton( + // 定义图标在IconButton中的定位方式,AlignmentGeometry 如果父Widget尺寸大于child Widget尺寸，这个属性设置会起作用，有很多种对齐方式。 + alignment:AlignmentDirectional.center, + // 按钮颜色 + color: _randomColor(), + // 如果图标被禁用，则用于按钮内图标的颜色。默认为当前主题的ThemeData.disabledColor + disabledColor:_randomColor(), + // 高亮时的背景色 + highlightColor: Colors.yellow, + // 按钮内图标的大小 + icon:Icon(type), + // 图标尺寸 + iconSize:(Random.secure().nextInt(20)+20).toDouble(), // 随机大小 + // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚 + splashColor: _randomColor(), + padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0), + // 描述按下按钮时将发生的操作的文本 + tooltip:'这是${ type.codePoint }信息', + // IconButton 的点击事件 + onPressed: () { + // Perform some action + if (_onPressed is VoidCallback) { + _onPressed(); + } + }); + } +} + +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} diff --git a/lib/widgets/elements/Form/Button/IconButton/index.dart b/lib/widgets/elements/Form/Button/IconButton/index.dart new file mode 100644 index 00000000..19ffdd5d --- /dev/null +++ b/lib/widgets/elements/Form/Button/IconButton/index.dart @@ -0,0 +1,168 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: IconButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/IconButton-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; + +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as iconButton; + + +const String _iconText0 = +"""### **简介** +> Icon button “图标按钮” +- IconButton widget上的图片，通过填充颜色（墨水）来对触摸作出反应。 +"""; + +const String _iconText1 = +"""### **基本用法** +> 参数的默认的按钮和禁用按钮 +- 图标按钮通常在AppBar.actions字段中使用，但它们也可以在许多其他地方使用。。 +- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。"""; + +const String _iconText2 = +"""### **进阶用法** +> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等 +- 如果可能，图标按钮的命中区域的大小至少为48.0像素，与实际的iconSize无关，以满足 Material Design规范中的触摸目标大小要求。的对准控制图标本身如何定位命中区域内。 +- ** 长按可弹出 tip 文字 ** +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Button/IconButton'; + + @override + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + buttonShapeType = _buttonShapeType; + }); + } + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'IconButton', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/IconButton/demo.dart', + child: allIconButtons(context,this), + docUrl: 'https://docs.flutter.io/flutter/material/IconButton-class.html', + ); + } +} + +/** + * 所有的 IconButton 按钮 + */ +Widget allIconButtons(BuildContext context,_DemoState that){ + final ShapeBorder buttonShape = drawShape(that.buttonShapeType); + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _iconText0), + textAlignBar(_iconText1), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + iconButton.IconButtonDefault(), + SizedBox(width: 20.0), // 间距 + iconButton.IconButtonDefault(false), + ], + ), + textAlignBar(_iconText2), + SizedBox(height: 10.0), + iconButton.IconButtonCustom('主要按钮',Colors.blue,buttonShape), + SizedBox(height: 10.0), + iconButton.IconButtonCustom('成功按钮',Colors.green,buttonShape), + SizedBox(height: 10.0), + iconButton.IconButtonCustom('信息按钮',Colors.grey,buttonShape), + SizedBox(height: 10.0), + iconButton.IconButtonCustom('警告按钮',Colors.orange,buttonShape), + SizedBox(height: 10.0), + iconButton.IconButtonCustom('危险按钮',Colors.pink,buttonShape), + SizedBox(height: 10.0), + RaisedButton( + // 文本内容 + child: const Text('点击切换，图标按钮', semanticsLabel: 'FLAT BUTTON 1'), + onPressed: ()=> that.setButtonShapeType()), + SizedBox(height: 20.0) + ]) + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} + +/* +* 绘制边框信息,比如是否有边框,是否是圆角 +* */ +ShapeBorder drawShape(String type){ + final Color _color = _randomColor(); + final borderWidth = Random.secure().nextInt(5).toDouble(); + final radiusWidth = Random.secure().nextInt(50).toDouble(); + + switch(type){ + case 'border': + return Border.all( + // 设置边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ); + break; + case 'radius': + return RoundedRectangleBorder( + side:new BorderSide( // 保留原来的边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ), + borderRadius: BorderRadius.only( + topRight: Radius.circular(radiusWidth), + topLeft: Radius.circular(radiusWidth), + bottomLeft: Radius.circular(radiusWidth), + bottomRight: Radius.circular(radiusWidth), + ), + ); + break; + default: + return null; + } +} + +/* +* 取随机颜色 +* */ +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} + diff --git a/lib/widgets/elements/Form/Button/OutlineButton/demo.dart b/lib/widgets/elements/Form/Button/OutlineButton/demo.dart new file mode 100644 index 00000000..58212c76 --- /dev/null +++ b/lib/widgets/elements/Form/Button/OutlineButton/demo.dart @@ -0,0 +1,122 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: OutlineButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* OutlineButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +class OutlineButtonDefault extends StatelessWidget { + final bool isDisabled; + + const OutlineButtonDefault([bool this.isDisabled = true]) + : assert(isDisabled != null), + super(); + + @override + Widget build(BuildContext context) { + return OutlineButton( + // 文本内容 + child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'), + onPressed: isDisabled ? () {} : null); + } +} + +/* +* OutlineButton.icon 默认按钮的实例 +* Create a text button from a pair of widgets that serve as the button's icon and label +* isDisabled:是否是禁用 +* */ +class OutlineButtonIconDefault extends StatelessWidget { + final bool isDisabled; + final IconData icon; + + const OutlineButtonIconDefault( + [bool this.isDisabled = true, IconData this.icon = Icons.add_circle]) + : super(); + + @override + Widget build(BuildContext context) { + return OutlineButton.icon( + // 文本内容 + icon: Icon(icon, size: 25.0, color: _randomColor()), + label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'), + onPressed: isDisabled + ? () { + //_showMessage('点击了 FLAT BUTTON ', context); + } + : null); + } +} + +/* +* OutlineButton 自定义的实例 +* */ +class OutlineButtonCustom extends StatelessWidget { + final String txt; + final Color color; + final ShapeBorder shape; + final VoidCallback onPressed; + + const OutlineButtonCustom( + [String this.txt = '自定义按钮', + Color this.color = Colors.blueAccent, + ShapeBorder this.shape, + VoidCallback this.onPressed]) + : super(); + + @override + Widget build(BuildContext context) { + final _onPressed = onPressed; + return OutlineButton( + // 文本内容 + child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'), + // 边框的颜色,颜色也可以走主题色 Theme.of(context).primaryColor + borderSide:new BorderSide(color: _randomColor(),width:Random.secure().nextInt(10).toDouble()), + // 按钮颜色 + color: _randomColor(), + // 按钮失效时边框颜色 + disabledBorderColor: Colors.red, + highlightedBorderColor:Colors.black54, + // 高亮时的背景色 + highlightColor: Colors.yellow, + // 失效时的背景色 + //disabledColor: Colors.grey, + // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用 + textColor: _randomColor(), + // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用 + disabledTextColor: _randomColor(), + // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,OutlineButton，OutlineButton，OutlineButton，它们是基于环境ButtonTheme配置的 + //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor. + textTheme: ButtonTextTheme.normal, + // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚 + splashColor: _randomColor(), + // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias + clipBehavior: Clip.antiAlias, + padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0), + //高亮时候的阴影 + highlightElevation: 10.0, + shape: shape, // 在Outline 里只能设置圆角,边框用borderSide + // OutlineButton 的点击事件 + onPressed: () { + // Perform some action + if (_onPressed is VoidCallback) { + _onPressed(); + } + }); + } +} + +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} diff --git a/lib/widgets/elements/Form/Button/OutlineButton/index.dart b/lib/widgets/elements/Form/Button/OutlineButton/index.dart new file mode 100644 index 00000000..e44cd71b --- /dev/null +++ b/lib/widgets/elements/Form/Button/OutlineButton/index.dart @@ -0,0 +1,217 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: OutlineButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/OutlineButton-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; + +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as outlineButton; + + +const String _outlineText0 = +"""### **简介** +> Outline button “边框按钮” +- RaisedButton和FlatButton之间的交叉：一个有边框的按钮，当按下按钮时，其高度增加，背景变得不透明。。 +- 高程最初为0.0，其背景颜色 为透明。按下按钮时，其背景变为不透明，然后其高程增加到highlightElevation。 +"""; + +const String _outlineText1 = +"""### **基本用法** +> 参数的默认的按钮和禁用按钮 +- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。 +- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。"""; + + +const String _outlineText2 = +"""### **进阶用法1** +> OutlineButton.icon 的用法，按钮图标和标签的widget创建文本按钮。"""; + +const String _outlineText3 = +"""### **进阶用法2** +> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等 +- Outline buttons 按钮有一个边框，其形状由形状定义 ，其外观由borderSide，disabledBorderColor和highlightedBorderColor定义。 +- 如果您想要水龙头的墨水效果，但又不想使用按钮，请考虑直接使用InkWell。 +- Outline buttons 的最小尺寸为88.0×36.0，可以用ButtonTheme 覆盖。 +- 通过 shape 属性的设置，改变边框样式和圆角。 +- 可以尝试长按按钮，按钮突出显示。 +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Button/OutlineButton'; + + @override + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + buttonShapeType = _buttonShapeType; + }); + } + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'OutlineButton', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/OutlineButton/demo.dart', + child: allOutlineButtons(context,this), + docUrl: 'https://docs.flutter.io/flutter/material/OutlineButton-class.html', + ); + } +} + +/** + * 所有的 OutlineButton 按钮 + */ +Widget allOutlineButtons(BuildContext context,_DemoState that){ + final ShapeBorder buttonShape = drawShape(that.buttonShapeType); + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _outlineText0), + textAlignBar(_outlineText1), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + outlineButton.OutlineButtonDefault(), + SizedBox(width: 20.0), // 间距 + outlineButton.OutlineButtonDefault(false), + ], + ), + textAlignBar(_outlineText2), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + //mainAxisSize: MainAxisSize.min, + children: [ + outlineButton.OutlineButtonIconDefault(), + outlineButton.OutlineButtonIconDefault(false), + ], + ), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + //mainAxisSize: MainAxisSize.min, + children: [ + outlineButton.OutlineButtonIconDefault(true, Icons.android), + outlineButton.OutlineButtonIconDefault(true, Icons.announcement), + ], + ), + textAlignBar(_outlineText3), + SizedBox(height: 10.0), + outlineButton.OutlineButtonCustom('主要按钮',Colors.blue,buttonShape), + SizedBox(height: 10.0), + outlineButton.OutlineButtonCustom('成功按钮',Colors.green,buttonShape), + SizedBox(height: 10.0), + outlineButton.OutlineButtonCustom('信息按钮',Colors.grey,buttonShape), + SizedBox(height: 10.0), + outlineButton.OutlineButtonCustom('警告按钮',Colors.orange,buttonShape), + SizedBox(height: 10.0), + outlineButton.OutlineButtonCustom('危险按钮',Colors.pink,buttonShape), + SizedBox(height: 10.0), + outlineButton.OutlineButtonCustom( '点击切换，随机改变按钮的圆角,边框样式', Colors.blue, buttonShape, + () => that.setButtonShapeType()), + SizedBox(height: 20.0) + ]) + ); +} + +/* + * alert 弹框 + * context:容器的父级 + * */ +void _showMessage(String name, BuildContext context) { + showDialog( + // alert 的父级 + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: new Text('提示'), + content: new Text(name), + actions: [ + new FlatButton( + // alert 的取消按钮 + onPressed: () { + // 取消的事件 + Navigator.of(context).pop(true); + }, + child: new Text('取消')) + ]); + } + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} + +/* +* 绘制边框信息,比如是否有边框,是否是圆角 +* */ +ShapeBorder drawShape(String type){ + final Color _color = _randomColor(); + final borderWidth = Random.secure().nextInt(5).toDouble(); + final radiusWidth = Random.secure().nextInt(50).toDouble(); + + switch(type){ + case 'border': + return Border.all( + // 设置边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ); + break; + case 'radius': + return RoundedRectangleBorder( + side:new BorderSide( // 保留原来的边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ), + borderRadius: BorderRadius.only( + topRight: Radius.circular(radiusWidth), + topLeft: Radius.circular(radiusWidth), + bottomLeft: Radius.circular(radiusWidth), + bottomRight: Radius.circular(radiusWidth), + ), + ); + break; + default: + return null; + } +} + +/* +* 取随机颜色 +* */ +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} + diff --git a/lib/widgets/elements/Form/Button/PopupMenuButton/demo.dart b/lib/widgets/elements/Form/Button/PopupMenuButton/demo.dart new file mode 100644 index 00000000..0015ee41 --- /dev/null +++ b/lib/widgets/elements/Form/Button/PopupMenuButton/demo.dart @@ -0,0 +1,144 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: RaisedButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* RaisedButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +enum WhyFarther { harder, smarter, selfStarter, tradingCharter } + +class PopupMenuButtonDefault extends StatelessWidget { + final bool isDisabled; + final String type; + + const PopupMenuButtonDefault( + [String this.type = 'default1', bool this.isDisabled = true]) + : assert(isDisabled != null), + super(); + + @override + Widget build(BuildContext context) { + switch (type) { + case 'default1': + return default1(context); + break; + case 'default2': + return default2(context); + break; + case 'default3': + return default3(context); + break; + default: + return default1(context); + } + } + + Widget default1(BuildContext context) { + return PopupMenuButton( + onSelected: (WhyFarther result) { + // setState(() { _selection = result; }); + }, + itemBuilder: (BuildContext context) => >[ + const PopupMenuItem( + value: WhyFarther.harder, + child: Text('Working a lot harder'), + ), + const PopupMenuItem( + value: WhyFarther.smarter, + child: Text('Being a lot smarter'), + ), + const PopupMenuItem( + value: WhyFarther.selfStarter, + child: Text('Being a self-starter'), + ), + const PopupMenuItem( + value: WhyFarther.tradingCharter, + child: Text('Placed in charge of trading charter'), + ), + ], + ); + } + + Widget default2(BuildContext context) { + return PopupMenuButton( + child: Text('点我试试'), + onSelected: (String value) {}, + itemBuilder: (BuildContext context) => >[ + new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")), + new PopupMenuItem(value: "选项二的内容", child: new Text("选项二")) + ]); + } + + Widget default3(BuildContext context) { + return PopupMenuButton( + //child: Text('点我试试'),// child 和 icon 不能同时用 + icon: Icon(Icons.menu), + onSelected: (String value) {}, + itemBuilder: (BuildContext context) => >[ + new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")), + new PopupMenuItem(value: "选项二的内容", child: new Text("选项二")) + ]); + } +} + + +class PopupMenuButtonCustom extends StatelessWidget { + final widget; + final parent; + const PopupMenuButtonCustom([this.widget,this.parent]) + : super(); + @override + Widget build(BuildContext context) { + print('onSelected1:${widget.options}'); + final String selectStr = widget.options['defaultSelect']; + return PopupMenuButton( + //如果提供，则用于此按钮的widget。 + child: RaisedButton.icon( + disabledColor:Colors.red, + icon: Icon(Icons.message, size: 25.0,color:Colors.yellow), + label: Text( + '自定义按钮', style: TextStyle(color: Colors.white), + semanticsLabel: 'FLAT BUTTON'), + // onPressed:(){} // 激活状态按钮 + ), + // 打开时放置菜单的z坐标。这可以控制菜单下方阴影的大小。 + elevation:10.0, + // 如果提供，则用于此按钮的图标。 + //icon + // 菜单项的值（如果有），在菜单打开时应突出显示。 + //initialValue:options['defaultSelect'], + initialValue:selectStr, + // 按下按钮时调用以创建要在菜单中显示的项目。 + itemBuilder: (BuildContext context) => >[ + new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")), + new PopupMenuItem(value: "选项二的内容", child: new Text("选项二")), + new PopupMenuItem(value: "选项三的内容", child: new Text("选项三")), + new PopupMenuItem(value: "选项四的内容", child: new Text("选项四")) + ], + // 应用于弹出菜单按钮的偏移量(x,y)。 + offset:Offset(0.0,50.0), + // 当用户在不选择项目的情况下关闭弹出菜单时调用。 + onCanceled:()=> + print('onCanceled'), + // 当用户从此按钮创建的弹出菜单中选择一个值时调用。 + onSelected:(String value){ + print('onSelected:${parent.setState}'); + parent.setState((){ + widget.options['defaultSelect']= value; + }); + }, + // 默认情况下匹配IconButton的8 dps填充。在某些情况下，特别是在此按钮作为列表项的尾随元素出现的情况下，能够将填充设置为零是有用的。 + padding:new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0.0, right: 0.0), + //描述按下按钮时将发生的操作的文本。 + tooltip:'这是信息' + ); + } +} \ No newline at end of file diff --git a/lib/widgets/elements/Form/Button/PopupMenuButton/index.dart b/lib/widgets/elements/Form/Button/PopupMenuButton/index.dart new file mode 100644 index 00000000..719acf4e --- /dev/null +++ b/lib/widgets/elements/Form/Button/PopupMenuButton/index.dart @@ -0,0 +1,90 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/24 + * Time: 下午5:25 + * email: zhu.yan@alibaba-inc.com + * tartget: PopupMenusButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/PopupMenuButton-class.html + */ + +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as popupMenuButton; + +const String _titleText0 = """ +### **简介** +> 按下时显示菜单 +- 当菜单因为选择了项目而被解除时调用onSelected。传递给onSelected的值是所选菜单项的值。 +- 可以提供 `child` 或 `icon` 中的一个，但不是能同时设置两者。如果提供了 `icon` ，则 `PopupMenuButton` 的行为类似于 `IconButton`。 +- 如果两者都为null，则创建一个标准 overflow icon（取决于平台）。 +"""; +const String _titleText1 = """ +### **基本用法** +> 此示例显示一个包含四个项目的菜单 +- 在枚举值之间进行选择，并_selection根据选择设置字段。 +"""; + +const String _titleText2 = """ +### **进阶用法** +> 此示例尝试调整所有属性，展示出效果 +- 默认选择第二个。 +- 再次打开,`PopupMenuItem` 保留上次的选择结果。 +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Button/PopupMenuButton'; + final Map options = {'defaultSelect': '选项二的内容'}; + @override + final _DemoState self = _DemoState(); + _DemoState createState() => self; +} + +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + buttonShapeType = _buttonShapeType; + }); + } + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'PopupMenuButton', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RaisedButton/demo.dart', + child: allPopupMenuButton(widget,this), + docUrl: 'https://docs.flutter.io/flutter/material/PopupMenuButton-class.html', + ); + } +} + +Widget allPopupMenuButton(Demo widget,State parent){ + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _titleText0), + SizedBox(height: 20.0), + MarkdownBody(data: _titleText1), + Row( + crossAxisAlignment:CrossAxisAlignment.center, + mainAxisAlignment:MainAxisAlignment.spaceBetween, + children: [ + popupMenuButton.PopupMenuButtonDefault('default1'), + popupMenuButton.PopupMenuButtonDefault('default2'), + popupMenuButton.PopupMenuButtonDefault('default3'), + ], + ), + SizedBox(height: 20.0), + MarkdownBody(data: _titleText2), + SizedBox(height: 20.0), + popupMenuButton.PopupMenuButtonCustom(widget,parent), + SizedBox(height: 40.0) + ] + )); +} \ No newline at end of file diff --git a/lib/widgets/elements/Form/Button/RaisedButton/demo.dart b/lib/widgets/elements/Form/Button/RaisedButton/demo.dart new file mode 100644 index 00000000..45be5193 --- /dev/null +++ b/lib/widgets/elements/Form/Button/RaisedButton/demo.dart @@ -0,0 +1,130 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: RaisedButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* RaisedButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +class RaisedButtonDefault extends StatelessWidget { + final bool isDisabled; + + const RaisedButtonDefault([bool this.isDisabled = true]) + : assert(isDisabled != null), + super(); + + @override + Widget build(BuildContext context) { + return RaisedButton( + // 文本内容 + child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'), + onPressed: isDisabled ? () {} : null); + } +} + +/* +* RaisedButton.icon 默认按钮的实例 +* Create a text button from a pair of widgets that serve as the button's icon and label +* isDisabled:是否是禁用 +* */ +class RaisedButtonIconDefault extends StatelessWidget { + final bool isDisabled; + final IconData icon; + + const RaisedButtonIconDefault( + [bool this.isDisabled = true, IconData this.icon = Icons.add_circle]) + : super(); + + Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); + } + + @override + Widget build(BuildContext context) { + return RaisedButton.icon( + // 文本内容 + icon: Icon(icon, size: 25.0, color: _randomColor()), + label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'), + onPressed: isDisabled + ? () { + //_showMessage('点击了 FLAT BUTTON ', context); + } + : null); + } +} + +/* +* RaisedButton 自定义的实例 +* */ +class RaisedButtonCustom extends StatelessWidget { + final String txt; + final Color color; + final ShapeBorder shape; + final VoidCallback onPressed; + + const RaisedButtonCustom( + [String this.txt = '自定义按钮', + Color this.color = Colors.blueAccent, + ShapeBorder this.shape, + VoidCallback this.onPressed]) + : super(); + + @override + Widget build(BuildContext context) { + final _onPressed = onPressed; + return RaisedButton( + // 文本内容 + child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'), + // 按钮颜色 + color: color, + // 按钮亮度 + colorBrightness: Brightness.dark, + // 高亮时的背景色 + //highlightColor: Colors.yellow, + // 失效时的背景色 + disabledColor: Colors.grey, + // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用 + textColor: Colors.white, + // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用 + disabledTextColor: Colors.grey, + // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,RaisedButton，RaisedButton，OutlineButton，它们是基于环境ButtonTheme配置的 + //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor. + textTheme: ButtonTextTheme.normal, + // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚 + splashColor: Colors.deepPurple, + // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias + clipBehavior: Clip.antiAlias, + padding: + new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0), + shape: (shape is ShapeBorder) + ? shape + : new Border.all( + // 设置边框样式 + color: Colors.grey, + width: 2.0, + style: BorderStyle.solid, + ), + // RaisedButton 的点击事件 + onPressed: () { + // Perform some action + if (_onPressed is VoidCallback) { + _onPressed(); + } + }, + // 改变高亮颜色回掉函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次 + // 参数 bool，按下后true，恢复false + onHighlightChanged: (isClick) { + print(isClick); + }); + } +} diff --git a/lib/widgets/elements/Form/Button/RaisedButton/index.dart b/lib/widgets/elements/Form/Button/RaisedButton/index.dart index f6727bbf..465ad90b 100644 --- a/lib/widgets/elements/Form/Button/RaisedButton/index.dart +++ b/lib/widgets/elements/Form/Button/RaisedButton/index.dart @@ -1,21 +1,217 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: RaisedButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/RaisedButton-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; import 'package:flutter/material.dart'; +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as raisedButton; + + +const String _raisedText0 = +"""### **简介** +> Raised button “凸起按钮” +- Raised button 基于 a Material widget 窗口widget，按下按钮时，Material.elevation 会增加。 +- 使用 Raised button 可将尺寸添加到大多数平面布局中。 +- 例如在复杂的内容列表中，或在宽阔的空间中。避免在已经提出的内容（例如对话框或卡片）上使用 Raised button 。 +"""; + +const String _raisedText1 = +"""### **基本用法** +> 参数的默认的按钮和禁用按钮 +- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。 +- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。"""; + + +const String _raisedText2 = +"""### **进阶用法1** +> RaisedButton.icon 的用方法，按钮图标和标签的widget创建文本按钮。"""; + +const String _raisedText3 = +"""### **进阶用法2** +> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等 +- Raised buttons 按钮具有全帽标签，一些内部填充和一些定义的尺寸。 +- 如果您想要水龙头的墨水效果，但又不想使用按钮，请考虑直接使用InkWell。 +- Raised buttons 的最小尺寸为88.0×36.0，可以用ButtonTheme 覆盖。 +- 通过 shape 属性的设置，改变边框样式和圆角。 +"""; + class Demo extends StatefulWidget { static const String routeName = '/element/Form/Button/RaisedButton'; - _Demo createState() => _Demo(); + + @override + _DemoState createState() => _DemoState(); } -class _Demo extends State { - +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + buttonShapeType = _buttonShapeType; + }); + } + @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text("FlatButton"), - ), - body: Container( - child: RaisedButton(onPressed: () {}, child: Text("BUtton")) - ) + return WidgetDemo( + title: 'RaisedButton', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RaisedButton/demo.dart', + child: allRaisedButtons(context,this), + docUrl: 'https://docs.flutter.io/flutter/material/RaisedButton-class.html', ); - } } + +/** + * 所有的 RaisedButton 按钮 + */ +Widget allRaisedButtons(BuildContext context,_DemoState that){ + final ShapeBorder buttonShape = drawShape(that.buttonShapeType); + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _raisedText0), + textAlignBar(_raisedText1), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + raisedButton.RaisedButtonDefault(), + SizedBox(width: 20.0), // 间距 + raisedButton.RaisedButtonDefault(false), + ], + ), + textAlignBar(_raisedText2), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + //mainAxisSize: MainAxisSize.min, + children: [ + raisedButton.RaisedButtonIconDefault(), + raisedButton.RaisedButtonIconDefault(false), + ], + ), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + //mainAxisSize: MainAxisSize.min, + children: [ + raisedButton.RaisedButtonIconDefault(true, Icons.android), + raisedButton.RaisedButtonIconDefault(true, Icons.announcement), + ], + ), + textAlignBar(_raisedText3), + SizedBox(height: 10.0), + raisedButton.RaisedButtonCustom('主要按钮',Colors.blue,buttonShape), + SizedBox(height: 10.0), + raisedButton.RaisedButtonCustom('成功按钮',Colors.green,buttonShape), + SizedBox(height: 10.0), + raisedButton.RaisedButtonCustom('信息按钮',Colors.grey,buttonShape), + SizedBox(height: 10.0), + raisedButton.RaisedButtonCustom('警告按钮',Colors.orange,buttonShape), + SizedBox(height: 10.0), + raisedButton.RaisedButtonCustom('危险按钮',Colors.pink,buttonShape), + SizedBox(height: 10.0), + raisedButton.RaisedButtonCustom( '点击切换，按钮的圆角', Colors.blue, buttonShape, + () => that.setButtonShapeType()), + SizedBox(height: 20.0) + ]) + ); +} + +/* + * alert 弹框 + * context:容器的父级 + * */ +void _showMessage(String name, BuildContext context) { + showDialog( + // alert 的父级 + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: new Text('提示'), + content: new Text(name), + actions: [ + new FlatButton( + // alert 的取消按钮 + onPressed: () { + // 取消的事件 + Navigator.of(context).pop(true); + }, + child: new Text('取消')) + ]); + } + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} + +/* +* 绘制边框信息,比如是否有边框,是否是圆角 +* */ +ShapeBorder drawShape(String type){ + final Color _color = _randomColor(); + final borderWidth = Random.secure().nextInt(5).toDouble(); + final radiusWidth = Random.secure().nextInt(50).toDouble(); + + switch(type){ + case 'border': + return Border.all( + // 设置边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ); + break; + case 'radius': + return RoundedRectangleBorder( + side:new BorderSide( // 保留原来的边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ), + borderRadius: BorderRadius.only( + topRight: Radius.circular(radiusWidth), + topLeft: Radius.circular(radiusWidth), + bottomLeft: Radius.circular(radiusWidth), + bottomRight: Radius.circular(radiusWidth), + ), + ); + break; + default: + return null; + } +} + +/* +* 取随机颜色 +* */ +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} + diff --git a/lib/widgets/elements/Form/Button/RawMaterialButton/demo.dart b/lib/widgets/elements/Form/Button/RawMaterialButton/demo.dart new file mode 100644 index 00000000..f2386338 --- /dev/null +++ b/lib/widgets/elements/Form/Button/RawMaterialButton/demo.dart @@ -0,0 +1,85 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: RawMaterialButton 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* RawMaterialButton 默认按钮的实例 +* isDisabled:是否是禁用，isDisabled 默认为true +* */ +class RawMaterialButtonDefault extends StatelessWidget { + final bool isDisabled; + + const RawMaterialButtonDefault([bool this.isDisabled = true]) + : assert(isDisabled != null), + super(); + + @override + Widget build(BuildContext context) { + return RawMaterialButton( + // 文本内容 + child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'), + onPressed: isDisabled ? () {} : null); + } +} + +/* +* RawMaterialButton 自定义的实例 +* */ +class RawMaterialButtonCustom extends StatelessWidget { + final String txt; + final Color color; + final ShapeBorder shape; + final VoidCallback onPressed; + + const RawMaterialButtonCustom( + [String this.txt = '自定义按钮', + Color this.color = Colors.blueAccent, + ShapeBorder this.shape, + VoidCallback this.onPressed]) + : super(); + + @override + Widget build(BuildContext context) { + final _onPressed = onPressed; + final _fontSize = (Random.secure().nextInt(10)+15).toDouble(); + return RawMaterialButton( + // 使用Material.textStyle为按钮的子项定义默认文本样式。 + textStyle:TextStyle(color: _randomColor(),fontSize: _fontSize), + // 定义形状和高程的动画更改的持续时间 + animationDuration:Duration(seconds: 1), + // 文本内容 + child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'), + // 高亮时的背景色 + highlightColor: Colors.yellow, + // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚 + splashColor: _randomColor(), + // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias + clipBehavior: Clip.antiAlias, + padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0), + //高亮时候的阴影 + highlightElevation: 10.0, + // 按钮材质的形状 + // shape: shape, + // RawMaterialButton 的点击事件 + onPressed: () { + // Perform some action + if (_onPressed is VoidCallback) { + _onPressed(); + } + }); + } +} + +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} diff --git a/lib/widgets/elements/Form/Button/RawMaterialButton/index.dart b/lib/widgets/elements/Form/Button/RawMaterialButton/index.dart new file mode 100644 index 00000000..818aeccc --- /dev/null +++ b/lib/widgets/elements/Form/Button/RawMaterialButton/index.dart @@ -0,0 +1,189 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: RawMaterialButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/RawMaterialButton-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; + +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as rawMaterialButton; + + +const String _rawMaterialText0 = +"""### **简介** +> RawMaterial button “RawMaterial 按钮” +- 基于Semantics，Material和InkWell 小部件创建按钮。 +- 此类不使用当前Theme或ButtonTheme来计算未指定参数的默认值。它旨在用于自定义材质按钮，可选择包含主题或特定于应用程序源的默认值。 +"""; + +const String _rawMaterialText1 = +"""### **基本用法** +> 参数的默认的按钮和禁用按钮 +"""; + +const String _rawMaterialText2 = +"""### **进阶用法** +> 更改项参数的自定义 +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Button/RawMaterialButton'; + + @override + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + //String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + //buttonShapeType = _buttonShapeType; + }); + } + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'RawMaterialButton', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RawMaterialButton/demo.dart', + child: allRawMaterialButtons(context,this), + docUrl: 'https://docs.flutter.io/flutter/material/RawMaterialButton-class.html', + ); + } +} + +/** + * 所有的 RawMaterialButton 按钮 + */ +Widget allRawMaterialButtons(BuildContext context,_DemoState that){ + final ShapeBorder buttonShape = drawShape(that.buttonShapeType); + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _rawMaterialText0), + textAlignBar(_rawMaterialText1), + ButtonBar( + alignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + rawMaterialButton.RawMaterialButtonDefault(), + SizedBox(width: 20.0), // 间距 + rawMaterialButton.RawMaterialButtonDefault(false), + ], + ), + textAlignBar(_rawMaterialText2), + SizedBox(height: 10.0), + rawMaterialButton.RawMaterialButtonCustom('主要按钮',Colors.blue,buttonShape), + SizedBox(height: 10.0), + rawMaterialButton.RawMaterialButtonCustom('成功按钮',Colors.green,buttonShape), + SizedBox(height: 10.0), + rawMaterialButton.RawMaterialButtonCustom('信息按钮',Colors.grey,buttonShape), + SizedBox(height: 10.0), + rawMaterialButton.RawMaterialButtonCustom('警告按钮',Colors.orange,buttonShape), + SizedBox(height: 10.0), + rawMaterialButton.RawMaterialButtonCustom('危险按钮',Colors.pink,buttonShape), + SizedBox(height: 10.0), + rawMaterialButton.RawMaterialButtonCustom( '点击切换，观察字体变化', Colors.blue, buttonShape, + () => that.setButtonShapeType()), + SizedBox(height: 20.0) + ]) + ); +} + +/* + * alert 弹框 + * context:容器的父级 + * */ +void _showMessage(String name, BuildContext context) { + showDialog( + // alert 的父级 + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: new Text('提示'), + content: new Text(name), + actions: [ + new FlatButton( + // alert 的取消按钮 + onPressed: () { + // 取消的事件 + Navigator.of(context).pop(true); + }, + child: new Text('取消')) + ]); + } + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} + +/* +* 绘制边框信息,比如是否有边框,是否是圆角 +* */ +ShapeBorder drawShape(String type){ + final Color _color = _randomColor(); + final borderWidth = Random.secure().nextInt(5).toDouble(); + final radiusWidth = Random.secure().nextInt(50).toDouble(); + + switch(type){ + case 'border': + return Border.all( + // 设置边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ); + break; + case 'radius': + return RoundedRectangleBorder( + side:new BorderSide( // 保留原来的边框样式 + width: borderWidth, + color: _color, + style: BorderStyle.solid, + ), + borderRadius: BorderRadius.only( + topRight: Radius.circular(radiusWidth), + topLeft: Radius.circular(radiusWidth), + bottomLeft: Radius.circular(radiusWidth), + bottomRight: Radius.circular(radiusWidth), + ), + ); + break; + default: + return null; + } +} + +/* +* 取随机颜色 +* */ +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} + diff --git a/lib/widgets/elements/Form/Button/index.dart b/lib/widgets/elements/Form/Button/index.dart index 2ce0834d..cdcff0bc 100644 --- a/lib/widgets/elements/Form/Button/index.dart +++ b/lib/widgets/elements/Form/Button/index.dart @@ -3,6 +3,12 @@ import "package:flutter/material.dart"; import 'FlatButton/index.dart' as FlatButton; import 'RaisedButton/index.dart' as RaisedButton; +import 'OutlineButton/index.dart' as OutlineButton; +import 'IconButton/index.dart' as IconButton; +import 'PopupMenuButton/index.dart' as PopupMenuButton; +import 'FloatingActionButton/index.dart' as FloatingActionButton; +import 'RawMaterialButton/index.dart' as RawMaterialButton; +import 'DropdownButton/index.dart' as DropdownButton; List widgetPoints = [ @@ -16,4 +22,34 @@ List widgetPoints = [ routerName: RaisedButton.Demo.routeName, buildRouter: (BuildContext context) => RaisedButton.Demo(), ), + WidgetPoint( + name: 'OutlineButton', + routerName: OutlineButton.Demo.routeName, + buildRouter: (BuildContext context) => OutlineButton.Demo(), + ), + WidgetPoint( + name: 'IconButton', + routerName: IconButton.Demo.routeName, + buildRouter: (BuildContext context) => IconButton.Demo(), + ), + WidgetPoint( + name: 'PopupMenuButton', + routerName: PopupMenuButton.Demo.routeName, + buildRouter: (BuildContext context) => PopupMenuButton.Demo(), + ), + WidgetPoint( + name: 'FloatingActionButton', + routerName: FloatingActionButton.Demo.routeName, + buildRouter: (BuildContext context) => FloatingActionButton.Demo(), + ), + WidgetPoint( + name: 'RawMaterialButton', + routerName: RawMaterialButton.Demo.routeName, + buildRouter: (BuildContext context) => RawMaterialButton.Demo(), + ), + WidgetPoint( + name: 'DropdownButton', + routerName: DropdownButton.Demo.routeName, + buildRouter: (BuildContext context) => DropdownButton.Demo(), + ) ]; \ No newline at end of file diff --git a/lib/widgets/elements/Form/CheckBox/Checkbox/demo.dart b/lib/widgets/elements/Form/CheckBox/Checkbox/demo.dart new file mode 100644 index 00000000..489225d2 --- /dev/null +++ b/lib/widgets/elements/Form/CheckBox/Checkbox/demo.dart @@ -0,0 +1,74 @@ +/** + * Created with Android Studio. + * User: 一晟 + * Date: 2018/11/22 + * Time: 上午12:03 + * email: zhu.yan@alibaba-inc.com + * tartget: Checkbox 的示例 + */ +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* Checkbox 默认按钮的实例 +* index 当前checkbox 的索引值 +* */ +class CheckboxDefault extends StatefulWidget{ + final int index; + final parent; + const CheckboxDefault([this.parent,int this.index = -1]) : super(); + @override + State createState() =>_CheckboxDefault(); +} +class _CheckboxDefault extends State { + bool isChecked=false; + Color color = _randomColor(); // 注意和下面的 StatelessWidget 里的 _randomColor 区别 + @override + Widget build(BuildContext context) { + return Checkbox( + activeColor: color, + tristate:false, + value: isChecked, + onChanged: (bool bol) { + setState((){ + isChecked = bol; + }); + } + ); + } +} + +/* +* Checkbox 默认按钮的实例 +* index 当前checkbox 的索引值 +* */ +class CheckboxSelect extends StatelessWidget { + final int index; + final widget; + final parent; + + const CheckboxSelect([this.widget,this.parent,int this.index = -1]) + : super(); + + @override + Widget build(BuildContext context) { + Color color = _randomColor(); + return Checkbox( + activeColor: color, + tristate:false, + value: parent.selectValue == this.index, + onChanged: (bool bol) { + parent.setState((){ + parent.selectValue = bol ? this.index : -1; + }); + } + ); + } +} + +Color _randomColor() { + var red = Random.secure().nextInt(255); + var greed = Random.secure().nextInt(255); + var blue = Random.secure().nextInt(255); + return Color.fromARGB(255, red, greed, blue); +} diff --git a/lib/widgets/elements/Form/CheckBox/Checkbox/index.dart b/lib/widgets/elements/Form/CheckBox/Checkbox/index.dart new file mode 100644 index 00000000..7410ce50 --- /dev/null +++ b/lib/widgets/elements/Form/CheckBox/Checkbox/index.dart @@ -0,0 +1,112 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: Checkbox 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/Checkbox-class.html + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; + +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as checkbox; + +const String _checkboxText0 = +"""### **简介** +> checkbox “复选框” +- 复选框本身不保持任何状态 +- 当复选框的状态发生变化时，窗口小部件会调用onChanged回调。 +- 大多数使用复选框的小部件将侦听onChanged回调，并使用新值重建复选框以更新复选框的可视外观。"""; + + +const String _checkboxText1 = +"""### **基本用法** +> 下面示例展示多个颜色(随机)样式的 `checkbox` +- 一个多选的 `checkbox` +"""; + +const String _checkboxText2 = +"""### **进阶用法** +> 下面示例展示多个颜色(随机)样式的 `checkbox` +- 一个单选 `checkbox` 操作 +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/CheckBox/Checkbox'; + + @override + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + int selectValue = -1; + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'Checkbox', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Checkbox/Checkbox/demo.dart', + child: allCheckboxs(context,this), + docUrl: 'https://docs.flutter.io/flutter/material/Checkbox-class.html', + ); + } +} + +/** + * 所有的 Checkbox 按钮 + */ +Widget allCheckboxs(BuildContext context,_DemoState that){ + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children: [ + MarkdownBody(data: _checkboxText0), + textAlignBar(_checkboxText1), + Row( + mainAxisAlignment : MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children:[ + checkbox.CheckboxDefault(that,0), + checkbox.CheckboxDefault(that,1), + checkbox.CheckboxDefault(that,2), + checkbox.CheckboxDefault(that,3), + checkbox.CheckboxDefault(that,4), + ], + ), + textAlignBar(_checkboxText2), + Row( + mainAxisAlignment : MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + checkbox.CheckboxSelect(context.widget,that,0), + checkbox.CheckboxSelect(context.widget,that,1), + checkbox.CheckboxSelect(context.widget,that,2), + checkbox.CheckboxSelect(context.widget,that,3), + checkbox.CheckboxSelect(context.widget,that,4), + ], + ), + SizedBox(width: 20.0), // 间距 + ]) + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt){ + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left) + ]) + ); +} + + diff --git a/lib/widgets/elements/Form/CheckBox/CheckboxListTile/demo.dart b/lib/widgets/elements/Form/CheckBox/CheckboxListTile/demo.dart new file mode 100644 index 00000000..5af9a5d3 --- /dev/null +++ b/lib/widgets/elements/Form/CheckBox/CheckboxListTile/demo.dart @@ -0,0 +1,130 @@ +/** + * Created with Android Studio. + * User: ryan + * Date: 2018/12/23 + * Time: 下午6:08 + * email: zhu.yan@alibaba-inc.com + * tartget: CheckboxListTile 的示例 + */ + +import 'dart:math'; +import 'package:flutter/material.dart'; + +/* +* Checkbox 默认按钮的实例 +* index 当前checkbox 的索引值 +* */ +class CheckboxListTileStateDefault extends StatefulWidget { + const CheckboxListTileStateDefault() : super(); + + @override + State createState() => _CheckboxListTileStateDefault(); +} + +/* +* CheckboxListTile 默认的实例,有状态 +* */ +class _CheckboxListTileStateDefault extends State { + bool _value = false; + void _valueChanged(bool value) { + for (var i = 0; i < isChecks.length; i++) { + isChecks[i] = value; + } + setState(() => _value = value); + } + bool isCheck=false; + List isChecks=[false,false,false,false]; + @override + Widget build(BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + new Center( + child: CheckboxListTile( + value: _value, + selected:true,// 默认文字是否高亮 + onChanged: _valueChanged, + dense: false,// 文字是否对齐 图标高度 + isThreeLine: false,// 文字是否三行显示 + title: Text('全部'), // 主标题 + controlAffinity: ListTileControlAffinity.trailing, // 将控件放在何处相对于文本,leading 按钮显示在文字后面,platform,trailing 按钮显示在文字前面 + subtitle: Text('勾选下列全部结果'), // 标题下方显示的副标题 + secondary: Icon(Icons.archive), // 从复选框显示在磁贴另一侧的小组件 + activeColor: Colors.red, // 选中此复选框时要使用的颜色 + ), + ), + new Center( + child: new CheckboxListTile( + value: isChecks[0], + title: new Text('选项1'), + activeColor: _value ? Colors.red : Colors.green, + controlAffinity: ListTileControlAffinity.platform, + onChanged: (bool){ + setState(() { + isChecks[0]=bool; + }); + }), + ), + new Center( + child: new CheckboxListTile( + value: isChecks[1], + title: new Text('选项2'), + activeColor: _value ? Colors.red : Colors.green, + controlAffinity: ListTileControlAffinity.platform, + onChanged: (bool){ + setState(() { + isChecks[1]=bool; + }); + }), + ), + new Center( + child: new CheckboxListTile( + value: isChecks[2], + title: new Text('选项3'), + activeColor: _value ? Colors.red : Colors.green, + controlAffinity: ListTileControlAffinity.platform, + onChanged: (bool){ + setState(() { + isChecks[2]=bool; + }); + }), + ), + new Center( + child: new CheckboxListTile( + value: isChecks[3], + title: new Text('选项4'), + activeColor: _value ? Colors.red : Colors.green, + controlAffinity: ListTileControlAffinity.platform, + onChanged: (bool){ + setState(() { + isChecks[3]=bool; + }); + }), + ) + ], + ); + } +} + +/* +* CheckboxListTile 默认的实例,无状态 +* */ +class CheckboxListTileDefault extends StatelessWidget { + final widget; + final parant; + const CheckboxListTileDefault ([this.widget,this.parant]) + : super(); + + @override + Widget build(BuildContext context) { + return CheckboxListTile( + title: Text('一个简单的例子'), + activeColor: Colors.red, + value: widget.valBool, + onChanged: (bool value) { + parant.setState(()=> widget.valBool = value); + }, + secondary: const Icon(Icons.hourglass_empty), + ); + } +} \ No newline at end of file diff --git a/lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart b/lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart new file mode 100644 index 00000000..87a801b4 --- /dev/null +++ b/lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart @@ -0,0 +1,93 @@ +/** + * Created with Android Studio. + * User: ryan + * Date: 2018/12/23 + * Time: 下午6:07 + * email: zhu.yan@alibaba-inc.com + * tartget: CheckboxListTile 的示例 + */ +import '../../../../../common/widget-demo.dart'; +import '../../../../../routers/application.dart'; +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:flutter/scheduler.dart'; + +import 'package:flutter_markdown/flutter_markdown.dart'; +import './demo.dart' as CheckboxListTileDemo; + +const String _CheckboxListTileText0 = +"""### **简介** +> CheckboxListTile “下拉复选框” +- 带有复选框的ListTile,带有标签的复选框。 +- 整个列表图块是交互式的：点击图块中的任意位置可切换复选框。 +"""; + + +const String _CheckboxListTileText1 = +"""### **基本用法** +> CheckboxListTile 的属性特征 +- Checkbox类似的命名属性，比如：onChanged和activeColor。 +- 和ListTile类似的命名属性，比如：title, subtitle, isThreeLine，dense。 +- selected属性和ListTile.selected 属性类似，但使用的颜色是activeColor属性，默认为当前Theme的颜色。 +- onChanged 回调函数为 null,显示禁用 +"""; + +const String _CheckboxListTileText2 = +"""### **进阶用法** +> CheckboxListTile 单选和全选的示例 +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Checkbox/CheckboxListTile'; + bool valBool = true; + @override + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'CheckboxListTile', + codeUrl: '${Application.github['widgetsURL']}elements/Form/Checkbox/CheckboxListTile/demo.dart', + child: allCheckboxs(context, this), + docUrl: 'https://docs.flutter.io/flutter/material/CheckboxListTile-class.html', + ); + } +} + +/** + * 所有的 CheckboxListTile widget + * context: 运行上下文 + * that: 指向有状态的 StatefulWidget + */ +Widget allCheckboxs(BuildContext context, _DemoState that) { + return Container( + //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0), + child: Column( + //mainAxisSize: MainAxisSize.max, + children:[ + MarkdownBody(data: _CheckboxListTileText0), + textAlignBar(_CheckboxListTileText1), + CheckboxListTileDemo.CheckboxListTileDefault(context.widget,that),// CheckboxListTile 不能放在 Row 里... + textAlignBar(_CheckboxListTileText2), + CheckboxListTileDemo.CheckboxListTileStateDefault(), + SizedBox(height: 20.0), + ]) + ); +} + +/* +* 带align的text +* */ +Widget textAlignBar(String txt) { + return new Align( + alignment: FractionalOffset.centerLeft, + child: Column( + children: [ + SizedBox(height: 20.0), + MarkdownBody(data: txt) + ]) + ); +} + diff --git a/lib/widgets/elements/Form/CheckBox/index.dart b/lib/widgets/elements/Form/CheckBox/index.dart index a47f241e..5a8d53c0 100644 --- a/lib/widgets/elements/Form/CheckBox/index.dart +++ b/lib/widgets/elements/Form/CheckBox/index.dart @@ -1 +1,19 @@ -import 'package:flutter/material.dart'; +import '../../../../model/widget.dart'; +import "package:flutter/material.dart"; + +import 'Checkbox/index.dart' as Checkbox; +import 'CheckboxListTile/index.dart' as CheckboxListTile; + + +List widgetPoints = [ + WidgetPoint( + name: 'Checkbox', + routerName: Checkbox.Demo.routeName, + buildRouter: (BuildContext context) => Checkbox.Demo(), + ), + WidgetPoint( + name: 'CheckboxListTile', + routerName: CheckboxListTile.Demo.routeName, + buildRouter: (BuildContext context) => CheckboxListTile.Demo(), + ) +]; \ No newline at end of file diff --git a/lib/widgets/elements/Form/Input/TextField/index.dart b/lib/widgets/elements/Form/Input/TextField/index.dart index 351f8b96..3a4e6550 100644 --- a/lib/widgets/elements/Form/Input/TextField/index.dart +++ b/lib/widgets/elements/Form/Input/TextField/index.dart @@ -1,14 +1,71 @@ +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: TextField 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/TextField-class.html + */ + +import '../../../../../common/widget_demo.dart'; import 'package:flutter/material.dart'; +import './text_field_demo.dart' ; + + +const String _textFieldText0 = +"""### **简介** +> Text Field “文本字段” +- 文本字段允许用户输入文本，无论是硬件键盘还是屏幕键盘。 +- 每当用户更改字段中的文本时，文本字段就会调用Onchange的回调。 +- 如果用户指示他们在字段中输入完成（例如，通过按软键盘上的按钮），则文本字段调用onSubmitted回调。 +"""; + +const String _textFieldText1 = +"""### **基本用法** +> 参数的默认的按钮和禁用按钮 +- 默认情况下，文本字段具有在文本字段下方绘制分隔符的修饰。 +- 您可以使用装饰属性来控制装饰，例如通过添加标签或图标。如果将装饰属性设置为空，则将完全删除装饰，包括装饰引入的额外填充，以节省标签的空间。 +- 如果装饰是非null（这是默认的），文本字段需要它的祖先之一是一个材质widget。当文本字段被敲击时，墨水溅到材料上的油漆被触发。 +- 若要将TeXFieldField集成到其他FieldFieldWrices窗体中，请考虑使用TeTFrimeField。"""; + +const String _textFieldText2 = +"""### **进阶用法** +> 实现稍微复杂点的效果，键盘就变成了数字优先，为输入框做一些其他的效果，如提示文字，icon、标签文字等 +- 增加一个keyboardType属性，把keyboardType设置为 TextInputType.number ，让TextField获得焦点的时候弹出的键盘就变成了数字优先。 +- 新增decoration属性，设置相关属性，可以发现当我们的TextField获得焦点时，图标会自动变色，提示文字会自动上移。 +- onChanged是每次输入框内每次文字变更触发的回调，onSubmitted是用户提交而触发的回调。 +- 每当用户改变输入框内的文字，都会在控制台输出现在的字符串.与onSubmitted用法相同。 +"""; class Demo extends StatefulWidget { - _Demo createState() => _Demo(); + static const String routeName = 'elements/Form/Input/TextField'; + @override + _DemoState createState() => _DemoState(); } -class _Demo extends State { - +class _DemoState extends State { + String buttonShapeType = 'border'; // 边框类型 + void setButtonShapeType(){ + String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border'; + this.setState((){ + buttonShapeType = _buttonShapeType; + }); + } + @override Widget build(BuildContext context) { - return Container( - child: TextField() + return WidgetDemo( + title: 'TextField', + codeUrl: 'elements/Form/Input/TextField/text_field_demo.dart', + contentList: [ + _textFieldText0, + _textFieldText1, + DefaultTextField(), + _textFieldText2, + CustomTextField() + ], + docUrl: 'https://docs.flutter.io/flutter/material/TextField-class.html', ); } } + diff --git a/lib/widgets/elements/Form/Input/TextField/text_field_demo.dart b/lib/widgets/elements/Form/Input/TextField/text_field_demo.dart new file mode 100644 index 00000000..b3e640f0 --- /dev/null +++ b/lib/widgets/elements/Form/Input/TextField/text_field_demo.dart @@ -0,0 +1,48 @@ +import 'package:flutter/material.dart'; + +/* +* 基本示例 +* */ +class DefaultTextField extends StatelessWidget { + @override + Widget build(BuildContext context) { + return new Container( + padding: const EdgeInsets.all(30.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, //文本是起始端对齐 + children: [ + Text('下面是基本输入框：', + style: TextStyle(fontSize: 15.5, height: 1.2, color: Colors.blue), + textAlign: TextAlign.left), + TextField() + ], + ), + ); + } +} + +/* +* 稍微复杂些的 TextField +* */ +class CustomTextField extends StatelessWidget { + void _textFieldChanged(String str) { + print(str); + } + + @override + Widget build(BuildContext context) { + return new Container( + padding: const EdgeInsets.all(30.0), + child: TextField( + keyboardType: TextInputType.number, + decoration: InputDecoration( + contentPadding: EdgeInsets.all(10.0), + icon: Icon(Icons.text_fields), + labelText: '请输入你的姓名)', + helperText: '请输入你的真实姓名', + ), + onChanged: _textFieldChanged, + autofocus: false, + )); + } +} diff --git a/lib/widgets/elements/Form/Input/index.dart b/lib/widgets/elements/Form/Input/index.dart index a47f241e..8e8cfc9f 100644 --- a/lib/widgets/elements/Form/Input/index.dart +++ b/lib/widgets/elements/Form/Input/index.dart @@ -1 +1,21 @@ -import 'package:flutter/material.dart'; +/** + * Created with 菜鸟手册. + * User: 一晟 + * Date: 2018/11/14 + * Time: 下午4:31 + * email: zhu.yan@alibaba-inc.com + * target: RaisedButton 的示例 + * 对应文档地址:https://docs.flutter.io/flutter/material/RaisedButton-class.html + */ +import '../../../../model/widget.dart'; +import "package:flutter/material.dart"; + +import './TextField/index.dart' as TextField; + +List widgetPoints = [ + WidgetPoint( + name: 'TextField', + routerName: TextField.Demo.routeName, + buildRouter: (BuildContext context) => TextField.Demo(), + ), +]; diff --git a/lib/widgets/elements/Form/Radio/Radio/demo.dart b/lib/widgets/elements/Form/Radio/Radio/demo.dart new file mode 100644 index 00000000..93022062 --- /dev/null +++ b/lib/widgets/elements/Form/Radio/Radio/demo.dart @@ -0,0 +1,57 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 22/11/2018 + * Time: 19:37 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + +class RadioADemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + int groupValue = 1; + onChange(val) { + this.setState(() { + groupValue = val; + }); + } + Widget build(BuildContext context) { + return ( + new Container( + alignment: Alignment.centerLeft, + child: new Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + new Radio( + value: 1, + groupValue: groupValue,//当value和groupValue一致的时候则选中 + onChanged: (T){ + onChange(T); + } + ), + new Radio( + value: 2, + groupValue: groupValue, + onChanged: (T){ + onChange(T); + } + ), + new Radio( + value: 3, + groupValue: groupValue, + onChanged: (T){ + onChange(T); + } + ) + ], + ), + ) + ); + } +} diff --git a/lib/widgets/elements/Form/Radio/Radio/index.dart b/lib/widgets/elements/Form/Radio/Radio/index.dart new file mode 100644 index 00000000..11e52c41 --- /dev/null +++ b/lib/widgets/elements/Form/Radio/Radio/index.dart @@ -0,0 +1,57 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 22/11/2018 + * Time: 19:17 + * email: sanfan.hx@alibaba-inc.com + * tartget: Radio相关 + */ + +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import 'package:flutter_markdown/flutter_markdown.dart'; +import 'demo.dart'; +const content1 = """ +# Radio +> material design 风格的单选按钮 + +Radio widget 代表表单中的单选按钮, 当groupValue = value时代表组件被选中。 + +在表单中, 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。 + +# 示例显示 +"""; + +const content2 = """ +# 基本用法 + +``` +new Radio( + value: value, + groupValue: groupValue, //当value和groupValue一致的时候则选中 + onChanged: (T){ + onChange(T); + } + +```` +"""; +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/Radio/index'; + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + contentList: [ + content1, + new RadioADemo(), + content2 + ], + title: 'Radio', + docUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html', + codeUrl: 'elements/Form/Radio/Radio/index.dart', + ); + } +} diff --git a/lib/widgets/elements/Form/Radio/RadioListTile/demo.dart b/lib/widgets/elements/Form/Radio/RadioListTile/demo.dart new file mode 100644 index 00000000..50ceb3c1 --- /dev/null +++ b/lib/widgets/elements/Form/Radio/RadioListTile/demo.dart @@ -0,0 +1,47 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 20/12/2018 + * Time: 14:32 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + + +class DemoA extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + String value = ''; + + onChange(v) { + this.setState(() { + value = v; + }); + } + Widget build(BuildContext context) { + + return new Column( + children: [ + RadioListTile( + title: const Text('A'), + value: "A", + groupValue: this.value, + isThreeLine: false, + subtitle: const Text("subtitleA"), + onChanged:onChange + ), + RadioListTile( + title: const Text('B'), + value: "B", + subtitle: const Text("subtitleB"), + groupValue: this.value, + onChanged: onChange + ), + ], + ); + } +} diff --git a/lib/widgets/elements/Form/Radio/RadioListTile/index.dart b/lib/widgets/elements/Form/Radio/RadioListTile/index.dart new file mode 100644 index 00000000..eaac6d60 --- /dev/null +++ b/lib/widgets/elements/Form/Radio/RadioListTile/index.dart @@ -0,0 +1,56 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 22/11/2018 + * Time: 19:17 + * email: sanfan.hx@alibaba-inc.com + * tartget: Radio相关 + */ + +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import 'demo.dart'; +const content1 = """ +# RadioListTile +> material design 风格的单选按钮附加文字label + +点击文字的同时 , 将会出发 Radio的点击效果. + +功能同 @Radio + +# 示例显示 +"""; + +const content2 = """ +# 基本用法 + +``` dart +RadioListTile( + title: const Text('title'), + value: value, + groupValue: groupValue, + onChanged:onChange +) +``` + +"""; +class Demo extends StatefulWidget { + static const String routeName = '/element/Form/RadioListTile/index'; + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + contentList: [ + content1, + new DemoA(), + content2 + ], + title: 'RadioListTile', + docUrl: 'https://docs.flutter.io/flutter/material/RadioListTile-class.html', + codeUrl: 'elements/Form/Radio/RadioListTile/demo.dart', + ); + } +} diff --git a/lib/widgets/elements/Form/Radio/index.dart b/lib/widgets/elements/Form/Radio/index.dart index a47f241e..27825fa6 100644 --- a/lib/widgets/elements/Form/Radio/index.dart +++ b/lib/widgets/elements/Form/Radio/index.dart @@ -1 +1,20 @@ -import 'package:flutter/material.dart'; +import '../../../../model/widget.dart'; +import "package:flutter/material.dart"; + +import 'Radio/index.dart' as Radio; +import 'RadioListTile/index.dart' as RadioTile; + + +List widgetPoints = [ + WidgetPoint( + name: 'Radio', + routerName: Radio.Demo.routeName, + buildRouter: (BuildContext context) => Radio.Demo(), + ), + WidgetPoint( + name: 'RadioListTile', + routerName: RadioTile.Demo.routeName, + buildRouter: (BuildContext context) => RadioTile.Demo(), + ), + +]; \ No newline at end of file diff --git a/lib/widgets/elements/Form/Slider/Slider/demo.dart b/lib/widgets/elements/Form/Slider/Slider/demo.dart new file mode 100644 index 00000000..b7e009f2 --- /dev/null +++ b/lib/widgets/elements/Form/Slider/Slider/demo.dart @@ -0,0 +1,89 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 20/12/2018 + * Time: 17:51 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + +class SliderDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + double value = 0.0; + Widget build(BuildContext context) { + return new Slider( + value: value,//实际进度的位置 + inactiveColor: Colors.black12,//进度中不活动部分的颜色 + label: 'value: $value', + min: 0.0, + max: 100.0, + divisions: 1000, + activeColor: Colors.blue,//进度中活动部分的颜色 + onChanged: (double){ + setState(() { + value = double.roundToDouble(); + }); + }, + ); + } + +} + + + +class SliderThemeDemo extends StatefulWidget { + _SliderThemeDemo createState() => _SliderThemeDemo(); +} + +class _SliderThemeDemo extends State { + double value = 0.0; + Widget build(BuildContext context) { + return new Container( + child: new SliderTheme( + data: SliderTheme.of(context).copyWith( +// activeTickMarkColor:Colors.yellowAccent, + activeTrackColor: Colors.yellowAccent,//实际进度的颜色 +// inactiveTickMarkColor:Colors.black + thumbColor: Colors.black,//滑块中心的颜色 + inactiveTrackColor:Colors.red,//默 认进度条的颜色 + valueIndicatorColor: Colors.blue,//提示进度的气派的背景色 + valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式 + color: Colors.white, + ), + inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色 + overlayColor: Colors.pink,//滑块边缘颜色 + ), + child: new Container( + width: 340.0, + margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0), + child: new Row( + children: [ + new Text('0.0'), + new Expanded( + flex: 1, + child: new Slider( + value: value, + label: '$value', + divisions: 10, + onChanged: (double){ + setState(() { + value=double.floorToDouble();//转化成double + }); + }, + min: 0.0, + max: 100.0, + ), + ), + new Text('100.0'), + ], + ), + ), + ), + ); + } +} diff --git a/lib/widgets/elements/Form/Slider/Slider/index.dart b/lib/widgets/elements/Form/Slider/Slider/index.dart new file mode 100644 index 00000000..2f6a6dfc --- /dev/null +++ b/lib/widgets/elements/Form/Slider/Slider/index.dart @@ -0,0 +1,93 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 20/12/2018 + * Time: 17:43 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import 'demo.dart'; + +const contentA = ''' +### **简介** +> 用来选择范围性的数据 + +slider 用来选择连续性的或者非连续性的数据. 默认是在一段最大值最小值间做任意值的选择. 如果你想选择间隔性的值, 例如0.0到50.0间,选择10, 15,...50.0这样的值, 给divisions设定一个非空的整数5,, 去分割区间范围. + +### **基本用法** + +关于slider有以下的术语: + +* **thumb** 滑块 用户可以水平拖拽移动的区域 + +* **track** 滑轨 thumb 可以滑动的线条区域 + +* **value indicator** 值指示器 当用户拖拽thumb的时候. 显示用户当前所选的属性值 + +* **active** 选中区 + +* **inactive** 非选中区 + +如果**onChanged**属性为空或者**min** .. **max**给出的范围 为空（例如如果min等于max），则将禁用滑块。 + +滑块小部件本身不保持任何状态State。相反，当滑块状态发生变化时，窗口小部件会调用 **onChanged** 回调。大多数使用滑块的小部件将侦听 **onChanged** 回调并使用新值重建滑块以更新滑块的视觉外观。要知道值何时开始更改，或何时更改，请设置可选回调**onChangeStart**或**onChangeEnd**。 + +默认情况下，滑块将尽可能宽，垂直居中。当给定无限制约束时，它将尝试使轨道宽144像素（每边有边距）并垂直收缩。 + +### **基本实例** + +'''; + + +const contentB = ''' +### **高级用法** +> 自定义Slider 样式 + +如果当前Slider样式 无法满足需求, 可以通过 ** SliderTheme ** 定制复杂样式 + +``` +new SliderTheme( + data: SliderTheme.of(context).copyWith( + activeTrackColor: Colors.yellowAccent,//实际进度的颜色 + inactiveTickMarkColor:Colors.black + thumbColor: Colors.black,//滑块中心的颜色 + inactiveTrackColor:Colors.red,//默 认进度条的颜色 + valueIndicatorColor: Colors.blue,//提示进度的气派的背景色 + valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式 + color: Colors.white, + ), + inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色 + overlayColor: Colors.pink,//滑块边缘颜色 + child: new Slider() +) + +``` + +### **基本实例** + +'''; + +class Demo extends StatefulWidget { + static const String routeName = 'elements/Form/Slider/Slider'; + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + return WidgetDemo( + title: 'Slider', + codeUrl: 'elements/Form/Slider/Slider/demo.dart', + contentList: [ + contentA, + SliderDemo(), + contentB, + SliderThemeDemo() + ], + docUrl: 'https://docs.flutter.io/flutter/material/Slider-class.html', + ); + } +} diff --git a/lib/widgets/elements/Form/Slider/SliderComponentShape/index.dart b/lib/widgets/elements/Form/Slider/SliderComponentShape/index.dart new file mode 100644 index 00000000..e69de29b diff --git a/lib/widgets/elements/Form/Slider/SliderTheme/demo.dart b/lib/widgets/elements/Form/Slider/SliderTheme/demo.dart new file mode 100644 index 00000000..0fb46382 --- /dev/null +++ b/lib/widgets/elements/Form/Slider/SliderTheme/demo.dart @@ -0,0 +1,63 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 27/12/2018 + * Time: 14:40 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + + +class SliderThemeDemo extends StatefulWidget { + _SliderThemeDemo createState() => _SliderThemeDemo(); +} + +class _SliderThemeDemo extends State { + double value = 0.0; + Widget build(BuildContext context) { + return new Container( + child: new SliderTheme( + data: SliderTheme.of(context).copyWith( +// activeTickMarkColor:Colors.yellowAccent, + activeTrackColor: Colors.yellowAccent,//实际进度的颜色 +// inactiveTickMarkColor:Colors.black + thumbColor: Colors.black,//滑块中心的颜色 + inactiveTrackColor:Colors.red,//默 认进度条的颜色 + valueIndicatorColor: Colors.blue,//提示进度的气派的背景色 + valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式 + color: Colors.white, + ), + inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色 + overlayColor: Colors.pink,//滑块边缘颜色 + ), + child: new Container( + width: 340.0, + margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0), + child: new Row( + children: [ + new Text('0.0'), + new Expanded( + flex: 1, + child: new Slider( + value: value, + label: '$value', + divisions: 10, + onChanged: (double){ + setState(() { + value=double.floorToDouble();//转化成double + }); + }, + min: 0.0, + max: 100.0, + ), + ), + new Text('100.0'), + ], + ), + ), + ), + ); + } +} diff --git a/lib/widgets/elements/Form/Slider/SliderTheme/index.dart b/lib/widgets/elements/Form/Slider/SliderTheme/index.dart new file mode 100644 index 00000000..a21eaa90 --- /dev/null +++ b/lib/widgets/elements/Form/Slider/SliderTheme/index.dart @@ -0,0 +1,75 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 20/12/2018 + * Time: 17:43 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import 'demo.dart'; + +const contentA = ''' +### **简介** +> 用来更改Slider样式的上层部件 + +将滑块主题应用于后代Slider小部件。 + +### **基本用法** + +> 通过更改sliderTheme.data, 修改Slider总体样式 + +基本属性参考以下代码: + +``` +new SliderTheme( + data: SliderThemeData({ + @required Color activeTrackColor, + @required Color inactiveTrackColor, + @required Color disabledActiveTrackColor, + @required Color disabledInactiveTrackColor, + @required Color activeTickMarkColor, + @required Color inactiveTickMarkColor, + @required Color disabledActiveTickMarkColor, + @required Color disabledInactiveTickMarkColor, + @required Color thumbColor, + @required Color disabledThumbColor, + @required Color overlayColor, + @required Color valueIndicatorColor, + @required SliderComponentShape thumbShape, + @required SliderComponentShape valueIndicatorShape, + @required ShowValueIndicator showValueIndicator, + @required TextStyle valueIndicatorTextStyle + }), + child: anyWidgetContain(Slider) // 用来包含slider的widget容器窗口 +), + +``` + +### **基本实例** + + +'''; + + +class Demo extends StatefulWidget { + static const String routeName = 'elements/Form/Slider/SliderTheme'; + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + return WidgetDemo( + title: 'SliderTheme', + codeUrl: 'elements/Form/Slider/SliderTheme/demo.dart', + contentList: [ + contentA, + new SliderThemeDemo(), + ], + docUrl: 'https://docs.flutter.io/flutter/material/SliderTheme-class.html', + ); + } +} diff --git a/lib/widgets/elements/Form/Slider/SliderThemeData/demo.dart b/lib/widgets/elements/Form/Slider/SliderThemeData/demo.dart new file mode 100644 index 00000000..0fb46382 --- /dev/null +++ b/lib/widgets/elements/Form/Slider/SliderThemeData/demo.dart @@ -0,0 +1,63 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 27/12/2018 + * Time: 14:40 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + + +class SliderThemeDemo extends StatefulWidget { + _SliderThemeDemo createState() => _SliderThemeDemo(); +} + +class _SliderThemeDemo extends State { + double value = 0.0; + Widget build(BuildContext context) { + return new Container( + child: new SliderTheme( + data: SliderTheme.of(context).copyWith( +// activeTickMarkColor:Colors.yellowAccent, + activeTrackColor: Colors.yellowAccent,//实际进度的颜色 +// inactiveTickMarkColor:Colors.black + thumbColor: Colors.black,//滑块中心的颜色 + inactiveTrackColor:Colors.red,//默 认进度条的颜色 + valueIndicatorColor: Colors.blue,//提示进度的气派的背景色 + valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式 + color: Colors.white, + ), + inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色 + overlayColor: Colors.pink,//滑块边缘颜色 + ), + child: new Container( + width: 340.0, + margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0), + child: new Row( + children: [ + new Text('0.0'), + new Expanded( + flex: 1, + child: new Slider( + value: value, + label: '$value', + divisions: 10, + onChanged: (double){ + setState(() { + value=double.floorToDouble();//转化成double + }); + }, + min: 0.0, + max: 100.0, + ), + ), + new Text('100.0'), + ], + ), + ), + ), + ); + } +} diff --git a/lib/widgets/elements/Form/Slider/SliderThemeData/index.dart b/lib/widgets/elements/Form/Slider/SliderThemeData/index.dart new file mode 100644 index 00000000..647d1bba --- /dev/null +++ b/lib/widgets/elements/Form/Slider/SliderThemeData/index.dart @@ -0,0 +1,71 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 20/12/2018 + * Time: 17:43 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import 'demo.dart'; + +const contentA = ''' +### **简介** +> SliderTheme的data修饰属性 **SliderThemeData** + + + +### **基本用法** + +> 配合SliderTheme, 修改slider组件各个部件的样式, 参照@Slider的各组件命名, 修改各部件样式 + +构造函数如下 +```` +const SliderThemeData({ + @required Color activeTrackColor, + @required Color inactiveTrackColor, + @required Color disabledActiveTrackColor, + @required Color disabledInactiveTrackColor, + @required Color activeTickMarkColor, + @required Color inactiveTickMarkColor, + @required Color disabledActiveTickMarkColor, + @required Color disabledInactiveTickMarkColor, + @required Color thumbColor, + @required Color disabledThumbColor, + @required Color overlayColor, + @required Color valueIndicatorColor, + @required SliderComponentShape thumbShape, + @required SliderComponentShape valueIndicatorShape, + @required ShowValueIndicator showValueIndicator, + @required TextStyle valueIndicatorTextStyle +}) + +```` + +### **基本实例** + + +'''; + + +class Demo extends StatefulWidget { + static const String routeName = 'elements/Form/Slider/SliderThemeData'; + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + return WidgetDemo( + title: 'SliderThemeData', + codeUrl: 'elements/Form/Slider/SliderThemeData/demo.dart', + contentList: [ + contentA, + new SliderThemeDemo() + ], + docUrl: 'https://docs.flutter.io/flutter/material/SliderThemeData-class.html', + ); + } +} diff --git a/lib/widgets/elements/Form/Slider/index.dart b/lib/widgets/elements/Form/Slider/index.dart index a47f241e..4511d653 100644 --- a/lib/widgets/elements/Form/Slider/index.dart +++ b/lib/widgets/elements/Form/Slider/index.dart @@ -1 +1,23 @@ -import 'package:flutter/material.dart'; +import '../../../../model/widget.dart'; +import "package:flutter/material.dart"; +import "Slider/index.dart" as Slider; +import "SliderTheme/index.dart" as SliderTheme; +import "SliderThemeData/index.dart" as SliderThemeData; + +List widgetPoints = [ + WidgetPoint( + name: 'Slider', + routerName: Slider.Demo.routeName, + buildRouter: (BuildContext context) => Slider.Demo(), + ), + WidgetPoint( + name: 'SliderTheme', + routerName: SliderTheme.Demo.routeName, + buildRouter: (BuildContext context) => SliderTheme.Demo(), + ), + WidgetPoint( + name: 'SliderThemeData', + routerName: SliderThemeData.Demo.routeName, + buildRouter: (BuildContext context) => SliderThemeData.Demo(), + ) +]; diff --git a/lib/widgets/elements/Form/Switch/AnimatedSwitcher/demo.dart b/lib/widgets/elements/Form/Switch/AnimatedSwitcher/demo.dart new file mode 100644 index 00000000..a5be8eff --- /dev/null +++ b/lib/widgets/elements/Form/Switch/AnimatedSwitcher/demo.dart @@ -0,0 +1,52 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 28/12/2018 + * Time: 19:58 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + +class AnimatedSwitcherDemo extends StatefulWidget { + const AnimatedSwitcherDemo({Key key}) : super(key: key); + + @override + _ClickCounterState createState() => _ClickCounterState(); +} + +class _ClickCounterState extends State { + int _count = 0; + + @override + Widget build(BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + AnimatedSwitcher( + duration: const Duration(milliseconds: 500), + transitionBuilder: (Widget child, Animation animation) { + return ScaleTransition(child: child, scale: animation); + }, + child: Text( + '$_count', + // This key causes the AnimatedSwitcher to interpret this as a "new" + // child each time the count changes, so that it will begin its animation + // when the count changes. + key: ValueKey(_count), + style: Theme.of(context).textTheme.display4, + ), + ), + RaisedButton( + child: const Text('Increment'), + onPressed: () { + setState(() { + _count += 1; + }); + }, + ), + ], + ); + } +} \ No newline at end of file diff --git a/lib/widgets/elements/Form/Switch/AnimatedSwitcher/index.dart b/lib/widgets/elements/Form/Switch/AnimatedSwitcher/index.dart new file mode 100644 index 00000000..357c5fe5 --- /dev/null +++ b/lib/widgets/elements/Form/Switch/AnimatedSwitcher/index.dart @@ -0,0 +1,47 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 28/12/2018 + * Time: 19:54 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import 'demo.dart'; + +const contentA = ''' +### **简介** +> 一个在新旧组件. 做渐变切换的组件. 有一定的动画效果 + +*注意*: +- 如果你切换的足够快.超过了间隔时间, 组件只会隐藏第一个 .并渐渐显示最后一个生效的组件. +- 如果你变更的组件.只是同一个组件, 不同的state或者不同的显示数据与状态. 请为当前组件每一个状态加入一个Key. 强制生效动画效果. + + + +### **基本实例** + +'''; + + +class Demo extends StatefulWidget { + static const String routeName = 'elements/Form/Switch/AnimatedSwitcher'; + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + return WidgetDemo( + title: 'SwitchListTile', + codeUrl: 'elements/Form/Switch/AnimatedSwitcher/demo.dart', + contentList: [ + contentA, + new AnimatedSwitcherDemo() + ], + docUrl: '', + ); + } +} diff --git a/lib/widgets/elements/Form/Switch/Switch/demo.dart b/lib/widgets/elements/Form/Switch/Switch/demo.dart new file mode 100644 index 00000000..283b6f33 --- /dev/null +++ b/lib/widgets/elements/Form/Switch/Switch/demo.dart @@ -0,0 +1,76 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 27/12/2018 + * Time: 17:30 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + + + +class SwitchDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + bool check = false; + Widget build(BuildContext context) { + return new Switch( + value: this.check, + onChanged: (bool val) { + this.setState(() { + this.check = !this.check; + }); + }, + ); + } +} + +class SwitchHighDemo extends StatefulWidget { + _SwitchHighDemo createState() => _SwitchHighDemo(); +} + +class _SwitchHighDemo extends State { + bool check = false; + Widget build(BuildContext context) { + return new Switch.adaptive( + value: this.check, + activeColor: Colors.blue, // 激活时原点颜色 + onChanged: (bool val) { + this.setState(() { + this.check = !this.check; + }); + }, + ); + } +} + + +class SwitchTypesDemo extends StatefulWidget { + _SwitchTypesDemo createState() => _SwitchTypesDemo(); +} + +class _SwitchTypesDemo extends State { + bool check = false; + Widget build(BuildContext context) { + return new Switch( + value: this.check, + activeTrackColor:Colors.green, + inactiveThumbColor: Colors.black, + inactiveThumbImage: NetworkImage('https://flutter.io/images/homepage/header-illustration.png'), + activeThumbImage: NetworkImage( + "https://flutter.io/images/homepage/screenshot-2.png" + ), + inactiveTrackColor: Colors.yellow, + activeColor: Colors.blue, // 激活时原点颜色 + onChanged: (bool val) { + this.setState(() { + this.check = !this.check; + }); + }, + ); + } +} \ No newline at end of file diff --git a/lib/widgets/elements/Form/Switch/Switch/index.dart b/lib/widgets/elements/Form/Switch/Switch/index.dart new file mode 100644 index 00000000..75b30205 --- /dev/null +++ b/lib/widgets/elements/Form/Switch/Switch/index.dart @@ -0,0 +1,99 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 20/12/2018 + * Time: 17:43 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import 'demo.dart'; + +const contentA = ''' +### **简介** +> Switch 是一个切换按钮组件，通常用于设置的选项里。 + + +### **基本用法** + +``` +new Switch( + value: isChecked, + activeColor: Colors.blue, // 激活时原点颜色 + onChanged: (bool val) { + this.setState(() { + this.isChecked = !this.isChecked; + }); + }, +) +``` + +### **基本实例** + +@SwitchDemo +'''; + + +const contentB = ''' + +ios 风格的实例 + +如果需要ios风格下的实例, 我们可以使用**Switch**的子类**adaptive**,参数使用与Switch相同, 实例如下: + +'''; + +const contentC = ''' +### **高级用法** + +当默认的样式无法满足需求时, 我们可以通过自定义各部件样式. + +- activeColor[**Color**] 当按钮状态通激活态时, 按钮的背景颜色 +- activeThumbImage [**ImageProvider**] 当按钮状态处于激活态时, 按钮的背景图像 +- activeTrackColor [**Color**] 当按钮状态处于激活态时, 滑轨的颜色 +- inactiveThumbColor [**Color**] 当按钮处于非激活状态时, 按钮的背景颜色, 与activeColor正好状态相反 +- inactiveThumbImage [**ImageProvider**] 当按钮状态处于非激活态时, 按钮的背景图像 +- inactiveTrackColor [**Color**] 当按钮状态处于非激活态时, 滑轨的颜色 + +下面是自定义, 更改了以上属性的实例 + +'''; + +const contentD = ''' + +``` +activeTrackColor:Colors.green, +inactiveThumbColor: Colors.black, +inactiveThumbImage: NetworkImage('https://flutter.io/images/homepage/header-illustration.png'), +activeThumbImage: NetworkImage( + "https://flutter.io/images/homepage/screenshot-2.png" +), +inactiveTrackColor: Colors.yellow, +``` +'''; + +class Demo extends StatefulWidget { + static const String routeName = 'elements/Form/Switch/Switch'; + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + return WidgetDemo( + title: 'Switch', + codeUrl: '', + contentList: [ + contentA, + SwitchDemo(), + contentB, + SwitchHighDemo(), + contentC, + SwitchTypesDemo(), + contentD + ], + docUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html', + ); + } +} diff --git a/lib/widgets/elements/Form/Switch/SwitchListTile/demo.dart b/lib/widgets/elements/Form/Switch/SwitchListTile/demo.dart new file mode 100644 index 00000000..a80109b7 --- /dev/null +++ b/lib/widgets/elements/Form/Switch/SwitchListTile/demo.dart @@ -0,0 +1,28 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 28/12/2018 + * Time: 15:48 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ + +import 'package:flutter/material.dart'; + + + +class SwitchListTileDemo extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + bool _lights = false; + Widget build(BuildContext context) { + return new SwitchListTile( + title: const Text('Lights'), + value: _lights, + onChanged: (bool value) { setState(() { _lights = value; }); }, + secondary: const Icon(Icons.lightbulb_outline), + ); + } +} \ No newline at end of file diff --git a/lib/widgets/elements/Form/Switch/SwitchListTile/index.dart b/lib/widgets/elements/Form/Switch/SwitchListTile/index.dart new file mode 100644 index 00000000..a87c3240 --- /dev/null +++ b/lib/widgets/elements/Form/Switch/SwitchListTile/index.dart @@ -0,0 +1,45 @@ +/** + * Created with Android Studio. + * User: 三帆 + * Date: 28/12/2018 + * Time: 15:48 + * email: sanfan.hx@alibaba-inc.com + * tartget: xxx + */ +import 'package:flutter/material.dart'; + +import '../../../../../common/widget_demo.dart'; +import 'demo.dart'; + +const contentA = ''' +### **简介** +> Switch 的一个衍生组件 + +基本用法与Switch相同.具体参考@Switch, 支持各种自定义样式. + + + +### **基本实例** + +'''; + + +class Demo extends StatefulWidget { + static const String routeName = 'elements/Form/Switch/SwitchListTile'; + _Demo createState() => _Demo(); +} + +class _Demo extends State { + + Widget build(BuildContext context) { + return WidgetDemo( + title: 'SwitchListTile', + codeUrl: 'elements/Form/Switch/SwitchListTile/demo.dart', + contentList: [ + contentA, + SwitchListTileDemo() + ], + docUrl: '', + ); + } +} diff --git a/lib/widgets/elements/Form/Switch/index.dart b/lib/widgets/elements/Form/Switch/index.dart index a47f241e..5529cee0 100644 --- a/lib/widgets/elements/Form/Switch/index.dart +++ b/lib/widgets/elements/Form/Switch/index.dart @@ -1 +1,24 @@ -import 'package:flutter/material.dart'; +import '../../../../model/widget.dart'; +import "package:flutter/material.dart"; +import "Switch/index.dart" as Switch; +import "SwitchListTile/index.dart" as SwitchListTile; +import "AnimatedSwitcher/index.dart" as AnimatedSwitcher; + + +List widgetPoints = [ + WidgetPoint( + name: 'Switch', + routerName: Switch.Demo.routeName, + buildRouter: (BuildContext context) => Switch.Demo(), + ), + WidgetPoint( + name: 'SwitchListTile', + routerName: SwitchListTile.Demo.routeName, + buildRouter: (BuildContext context) => SwitchListTile.Demo(), + ), + WidgetPoint( + name: 'AnimatedSwitcher', + routerName: AnimatedSwitcher.Demo.routeName, + buildRouter: (BuildContext context) => AnimatedSwitcher.Demo(), + ) +]; diff --git a/lib/widgets/elements/Form/Text/RichText/index.dart b/lib/widgets/elements/Form/Text/RichText/index.dart index af5a52d6..43811bc9 100644 --- a/lib/widgets/elements/Form/Text/RichText/index.dart +++ b/lib/widgets/elements/Form/Text/RichText/index.dart @@ -1,5 +1,60 @@ import 'package:flutter/material.dart'; +import 'package:flutter_markdown/flutter_markdown.dart'; +import '../../../../../common/widget-demo.dart'; +const String intro = """ +# 富文本显示 + +在富文本使用多个不同风格的widget显示文本。要显示的文本使用TextSpan对象树来描述，每个对象都有一个用于该子树的关联样式。文本可能会跨越多行，也可能全部显示在同一行上，具体取决于布局约束。 + +# 示例代码 + +``` +RichText( + text: TextSpan( + text: 'Hello ', + style: DefaultTextStyle.of(context).style, + children: [ + TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)), + TextSpan(text: ' world!'), + ], + ), +) +``` + +# 示例示例 + +"""; +const String diff = """ +# RichText 与 Text.rich 对比 + +无论是Text或者Text.rich, 查看源代码发现. 都是由RichText构建出来 + +## 源码展示 + +``` +// Text 源码 +@override + Widget build(BuildContext context) { + ... + Widget result = RichText( + ... + + style: effectiveTextStyle, + text: data, + children: textSpan != null ? [textSpan] : null, + ), + ); + ... + return result; + } +``` +待补充... +"""; +const Map markDesc = { + 'intro': intro, + 'diff': diff +}; class Demo extends StatefulWidget { static const String routeName = '/element/Form/Text/RichText'; _Demo createState() => _Demo(); @@ -8,13 +63,30 @@ class Demo extends StatefulWidget { class _Demo extends State { Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text("FlatButton"), - ), - body: Container( - child: Text("this is RichText") - ) + return WidgetDemo( + title: 'Rich Text', + docUrl: 'https://docs.flutter.io/flutter/widgets/RichText-class.html', + codeUrl: '', + child: new Column( + children: [ + MarkdownBody(data: markDesc['intro']), + Container( + color: Color(0xff000000), + width: 750.0, + child: RichText( + text: TextSpan( + text: 'Hello ', +// style: TextStyle(fontWeight: FontWeight.normal, inherit: true, fontSize: 44), + children: [ + TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold, color: Color(0xfffffc42))), + TextSpan(text: ' world!', style: TextStyle(fontStyle: FontStyle.italic)), + ], + ), + ), + ), + MarkdownBody(data: markDesc['diff']), + ], + ), ); } } diff --git a/lib/widgets/elements/Form/Text/Text/index.dart b/lib/widgets/elements/Form/Text/Text/index.dart index 9532971d..95c15584 100644 --- a/lib/widgets/elements/Form/Text/Text/index.dart +++ b/lib/widgets/elements/Form/Text/Text/index.dart @@ -1,20 +1,116 @@ import 'package:flutter/material.dart'; +//import 'package:flutter_markdown/flutter_markdown.dart'; +import '../../../../../common/widget-demo.dart'; +import '../../../../../components/markdown.dart'; +const String intro = """ +# 说明 + +> 具有某个单一样式的文本显示的widget组件, 显示支持一行或者多行. 默认样式会继承层级最为接近的 *DefaultStyle* +当然, 你也可以重新他的样式 将 *DefaultStyle.inherit 设置为 false* + +# 示例代码 + +``` dart +Text( + 'Hello, World ! How are you?', + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontWeight: FontWeight.bold), +) +``` + +# 示例显示 + + +"""; + +const String leftDesc = """ +# 示例代码 + + +``` dart +// 左侧布局示例 +Text( + "Hello, World! I'm start from left?", + textAlign: TextAlign.left, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontWeight: FontWeight.bold, inherit: true), +), +``` +# 示例显示 +"""; + +const String RichDesc = """ + +# 复杂文本显示 + +使用 Text.rich 构造函数，Text 组件可以显示具有不同样式的 TextSpan 段落。下面的示例显示每个单词具有不同样式的“Hello beautiful world”。 + +``` +Text.rich( + TextSpan( + text: 'Hello', // default text style + children: [ + TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)), + TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)), + ], + ), +) +``` +"""; + +const Map markDesc = { + "intro": intro, + "left": leftDesc, + "rich": RichDesc +}; class Demo extends StatefulWidget { static const String routeName = '/element/Form/Text/Text'; _Demo createState() => _Demo(); } class _Demo extends State { + onButtonTap() { + } Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text("FlatButton"), - ), - body: Container( - child: Text("this is Text") - ) + return WidgetDemo( + title: "Text", + docUrl: 'flutter/widgets/Text-class.html', + codeUrl: 'elements/Form/Text/Text/index.dart', + child: new Column( + children: [ + MarkdownBody(markDesc['intro']), + Text( + 'Hello, World! How are you?', + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontWeight: FontWeight.bold), + ), + MarkdownBody(markDesc['left']), + Container( + width: 750.0, + color: Color(0xFF0096ef), + child: Text( + "Hello, World! I'm start from left?", + textAlign: TextAlign.left, + overflow: TextOverflow.ellipsis, + style: TextStyle(color: Color(0xffffffff)), + ), + ), + MarkdownBody( markDesc['rich']), + Text.rich( + TextSpan( + text: 'Hello', // default text style + children: [ + TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)), + TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)), + ], + ), + ) + ], + ) ); } } diff --git a/lib/widgets/elements/Form/index.dart b/lib/widgets/elements/Form/index.dart index cb691eff..7a140fa3 100644 --- a/lib/widgets/elements/Form/index.dart +++ b/lib/widgets/elements/Form/index.dart @@ -1,9 +1,19 @@ import 'Button/index.dart' as Button; import 'Text/index.dart' as Text; +import 'Input/index.dart' as Input; +import 'CheckBox/index.dart' as CheckBox; +import 'Radio/index.dart' as Radio; +import 'Slider/index.dart' as Slider; +import 'Switch/index.dart' as Switch; List getWidgets() { List result = []; result.addAll(Button.widgetPoints); result.addAll(Text.widgetPoints); + result.addAll(Input.widgetPoints); + result.addAll(CheckBox.widgetPoints); + result.addAll(Radio.widgetPoints); + result.addAll(Slider.widgetPoints); + result.addAll(Switch.widgetPoints); return result; } \ No newline at end of file diff --git a/lib/widgets/elements/Frame/Box/Fittedbox/demo.dart b/lib/widgets/elements/Frame/Box/Fittedbox/demo.dart new file mode 100644 index 00000000..b1022cc7 --- /dev/null +++ b/lib/widgets/elements/Frame/Box/Fittedbox/demo.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; + +/** + * Author: xiaojia.dxj + * Date: 2018/12/2 + * Email: xiaojia.dxj@alibaba-inc.com + * LastUpdateTime: 2018/12/2 + * LastUpdateBy: xj.deng + * + * Describle:FittedBox + */ + +class FittedBoxDefault extends StatelessWidget { + final BoxFit curfit; + String dec; + + FittedBoxDefault({Key key, BoxFit this.curfit, this.dec}); + + @override + Widget build(BuildContext context) { + return new Column( + children: [ + Container( + //外部有位置约束，内部大小设定失效，保持和外部约束一致 + height: 100.0, + width: 100.0, + color: Colors.yellow, + child: FittedBox( + fit: curfit, + // 修改child写入布局时期分配的空间 + alignment: Alignment.center, + //alignment修改child于父空间对齐方式，默认：Alignment.center, + child: Container( +// height: 50.0, +// width: 50.0, + color: Colors.red, + child: Text( + 'fittedBox', + style: TextStyle(color: Colors.white), + ), + ), + ), + ), + Text(dec), + ], + ); + } +} diff --git a/lib/widgets/elements/Frame/Box/Fittedbox/index.dart b/lib/widgets/elements/Frame/Box/Fittedbox/index.dart new file mode 100644 index 00000000..85160d42 --- /dev/null +++ b/lib/widgets/elements/Frame/Box/Fittedbox/index.dart @@ -0,0 +1,108 @@ + +/** + * Author: xiaojia.dxj + * Date: 2019-01-08 + * Email: xiaojia.dxj@alibaba-inc.com + * LastUpdateTime: 2019-01-08 + * LastUpdateBy: xj.deng + * + */ +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import './demo.dart' as fittedBox; + +const String Text0 = """ +### **FittedBox** +> 根据自己的需要，对child进行缩放和定位 +- 可以看看变换，在绘制时任意变换应用在子窗口的widget +"""; + +const String Text1 = """ +### **基本用法** +> 根据外部约束，调整child +- 如果外部没有约束，按照child的大小。 +- 如果外部有约束，按照外部约束调整自身大小，然后缩放调整child，根据条件进行放置 +- BoxFix 属性，修改child写入布局时期分配的空间 +- alignment修改child于父空间对齐方式，默认：Alignment.center, +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Frame/Box/FittedBox'; + + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'FittedBox', + codeUrl: 'elements/Frame/Box/Fittedbox/demo.dart', + docUrl: 'https://docs.flutter.io/flutter/widgets/FittedBox-class.html', + contentList: [ + Text0, + Text1, + _FittedBoxCreate(), + ], + ); + } + + Column _FittedBoxCreate() { + return Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + fittedBox.FittedBoxDefault( + /** + * 设置child写入布局期间分配空间 + */ + curfit: BoxFit.contain, + dec: 'contain', + ), + fittedBox.FittedBoxDefault( + curfit: BoxFit.fill, + dec: 'fill', + ), + fittedBox.FittedBoxDefault( + curfit: BoxFit.cover, + dec: 'cover', + ), + ], + ), + SizedBox( + height: 20.0, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + fittedBox.FittedBoxDefault( + curfit: BoxFit.fitHeight, + dec: 'fitHeight', + ), + fittedBox.FittedBoxDefault( + curfit: BoxFit.fitWidth, + dec: 'fitWidth', + ), + ], + ), + SizedBox( + height: 20.0, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + fittedBox.FittedBoxDefault( + curfit: BoxFit.none, + dec: 'none', + ), + fittedBox.FittedBoxDefault( + curfit: BoxFit.scaleDown, + dec: 'scaleDown', + ), + ], + ), + ], + ); + } +} diff --git a/lib/widgets/elements/Frame/Box/RenderBox/demo.dart b/lib/widgets/elements/Frame/Box/RenderBox/demo.dart new file mode 100644 index 00000000..9c1a7565 --- /dev/null +++ b/lib/widgets/elements/Frame/Box/RenderBox/demo.dart @@ -0,0 +1,22 @@ +import 'package:flutter/material.dart'; + +class RenderBoxDemo extends StatefulWidget { + _RenderBoxDemoState createState() => _RenderBoxDemoState(); +} + +class _RenderBoxDemoState extends State { + @override + Widget build(BuildContext context) { + return Container( + // child: RenderFoo(), + ); + } +} + +class RenderFoo extends RenderBox { + @override + bool get hasSize => super.hasSize; + + @override + BoxConstraints get constraints => super.constraints; +} diff --git a/lib/widgets/elements/Frame/Box/RenderBox/index.dart b/lib/widgets/elements/Frame/Box/RenderBox/index.dart new file mode 100644 index 00000000..58539a94 --- /dev/null +++ b/lib/widgets/elements/Frame/Box/RenderBox/index.dart @@ -0,0 +1,63 @@ +/* + * @Author: xiaojia.dxj + * @Date: 2019-01-08 15:56:26 + * @Last Modified by: xiaojia.dxj + * @Last Modified time: 2019-01-08 15:56:26 + */ +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import './demo.dart' as sizeBox; + +const String _Text = ''' +### **简介** +> BoxConstraints为抽象类，我们可以使用BoxConstraints,一个不可边的约束布局，renderBox布局 +- 一个尺寸尊重一个BoxConstraints，当且仅当，以下关系式的成立： +minWidth <= Size.width <= maxWidth +minHeight <= Size.height <= maxHeight +约束本身必须满足这些关系： + +0.0 <= minWidth <= maxWidth <= double.infinity +0.0 <= minHeight <= maxHeight <= double.infinity +double.infinity是每个约束的合法值。 +'''; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Frame/Box/RenderBox'; + + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'Table', + codeUrl: 'elements/Frame/Box/RenderBox/demo.dart', + contentList: [ + _Text, + _SizeBoxCreate(), + ], + docUrl: 'https://docs.flutter.io/flutter/widgets/RenderBox-class.html', + ); + } + + Column _SizeBoxCreate() { + return new Column( + children: [ + /** + * Immutable layout constraints for RenderBox layout. + */ + SizedBox( + width: 900.0, + height: 50.0, + child: const Card( + child: Text( + 'SizedBox', + textAlign: TextAlign.center, + ), + color: Color(0xFFEF5350)), + ), + ], + ); + } +} diff --git a/lib/widgets/elements/Frame/Box/SizeBox/demo.dart b/lib/widgets/elements/Frame/Box/SizeBox/demo.dart new file mode 100644 index 00000000..9d7998dc --- /dev/null +++ b/lib/widgets/elements/Frame/Box/SizeBox/demo.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; + +class SizeBoxDefault extends StatelessWidget { + @override + Widget build(BuildContext context) { + return SizedBox( + width: 140.0, + height: 80.0, + child: const Card( + child: Text( + 'SizedBox', + textDirection: TextDirection.rtl, + ), + margin: EdgeInsets.all(20.0), + color: Color(0xFFEF9A9A), + ), + ); + } +} diff --git a/lib/widgets/elements/Frame/Box/SizeBox/index.dart b/lib/widgets/elements/Frame/Box/SizeBox/index.dart new file mode 100644 index 00000000..36ee028f --- /dev/null +++ b/lib/widgets/elements/Frame/Box/SizeBox/index.dart @@ -0,0 +1,68 @@ +/* + * @Author: xiaojia.dxj + * @Date: 2019-01-08 15:55:46 + * @Last Modified by: xiaojia.dxj + * @Last Modified time: 2019-01-08 15:55:46 + */ +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import './demo.dart' as sizeBox; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Frame/Box/SizeBox'; + + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'Table', + codeUrl: 'elements/Frame/Box/SizedBox/demo.dart', + contentList: [ + _SizeBoxCreate(), + ], + docUrl: 'https://docs.flutter.io/flutter/widgets/SizedBox-class.html', + ); + } + + Column _SizeBoxCreate() { + return new Column( + children: [ + new Text("SizedBox", + textAlign: TextAlign.right, + style: TextStyle( + fontSize: 28.0, + fontWeight: FontWeight.bold, + )), + new Row( + children: [ + sizeBox.SizeBoxDefault(), + SizedBox( + width: 130.0, + height: 80.0, + child: const Card( + child: Text( + 'SizedBox', + textAlign: TextAlign.center, + ), + margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0), + color: Color(0xFFE57373)), + ), + ], + ), + SizedBox( + width: 900.0, + height: 50.0, + child: const Card( + child: Text( + 'SizedBox', + textAlign: TextAlign.center, + ), + color: Color(0xFFEF5350)), + ), + ], + ); + } +} diff --git a/lib/widgets/elements/Frame/Box/TextBox/demo.dart b/lib/widgets/elements/Frame/Box/TextBox/demo.dart new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/lib/widgets/elements/Frame/Box/TextBox/demo.dart @@ -0,0 +1 @@ + diff --git a/lib/widgets/elements/Frame/Box/TextBox/index.dart b/lib/widgets/elements/Frame/Box/TextBox/index.dart new file mode 100644 index 00000000..75d79d9e --- /dev/null +++ b/lib/widgets/elements/Frame/Box/TextBox/index.dart @@ -0,0 +1,50 @@ +import 'package:flutter/material.dart'; +import '../../../../../common/widget_demo.dart'; +import './demo.dart' as TextBox; + +const String _Text = """### **TextBox简介** +> 是一个包含一段文本的矩形 +- 它与rect类似，不过包含一个固定的TextDirection。 +- sizebox的width，heigh为null，child自身设置 +### **属性** +> width：宽 +> height：高 +- ex:200*50 sizebox +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/Frame/Box/TextBox'; + + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'TextBox', + codeUrl: 'elements/Frame/Box/TextBox/demo.dart', + contentList: [ + _Text, + _creatTexbox(), + ], + docUrl: 'https://docs.flutter.io/flutter/dart-ui/TextBox-class.html', + ); + } +} + +Column _creatTexbox() { + return Column( + children: [ + // Text("TextBox ",textDirection: new TextBox.fo,), + Container( + // child: TextBox.fromLTRB(270.0, 180.0, 1360.0, 730.0,TextDirection.rtl), + + ) + +// centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0), + + + ], + ); +} diff --git a/lib/widgets/elements/Frame/Box/index.dart b/lib/widgets/elements/Frame/Box/index.dart deleted file mode 100644 index a47f241e..00000000 --- a/lib/widgets/elements/Frame/Box/index.dart +++ /dev/null @@ -1 +0,0 @@ -import 'package:flutter/material.dart'; diff --git a/lib/widgets/themes/Material/MaterialAccentColor/index.dart b/lib/widgets/themes/Material/MaterialAccentColor/index.dart new file mode 100644 index 00000000..1d0c220e --- /dev/null +++ b/lib/widgets/themes/Material/MaterialAccentColor/index.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_rookie_book/common/widget_demo.dart'; +import 'package:flutter_rookie_book/widgets/themes/Material/MaterialColor/demo.dart'; + +const Text0 = ''' +### **简介** +> 用来定义单一的强调色，以及四种色调的色系 +- 颜色的阴影用索引表示，索引较小的颜色比较浅，较大的索引比较暗。 +- 有个四个有效索引，100，200，400，和700.此颜色的值应与索引200和shade200的值相同。 +'''; + +const String Text1 = """ +### **基本用法** +> 这里我们配合Icon来进行演示 +- 颜色的值应与指数500和shade500的值相同 +"""; + +class Demo extends StatefulWidget { + static const String routeName = + '/element/themes/Material/MaterialAccentColor'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'MaterialAccentColor', + codeUrl: 'elements/themes/Material/MaterialAccentColor', + docUrl: + 'https://docs.flutter.io/flutter/material/MaterialAccentColor-class.html', + contentList: [ + Text0, + Text1, + ColorDemo(), + ], + ); + } +} diff --git a/lib/widgets/themes/Material/MaterialApp/demo.dart b/lib/widgets/themes/Material/MaterialApp/demo.dart new file mode 100644 index 00000000..be00903d --- /dev/null +++ b/lib/widgets/themes/Material/MaterialApp/demo.dart @@ -0,0 +1,32 @@ +/* + * @Author: 一凨 + * @Date: 2018-12-27 16:25:25 + * @Last Modified by: 一凨 + * @Last Modified time: 2018-12-27 16:25:25 + */ + +// !!! 代码示例，并非Demo +// import 'package:flutter/material.dart'; +// class MaterialApp extends StatelessWidget { +// @override +// Widget build(BuildContext context) { +// return new MaterialApp( +// title: 'title', +// theme: new ThemeData( +// primaryColor: Color(ThemeColor), +// backgroundColor: Color(0xFFEFEFEF), +// accentColor: Color(0xFF888888), +// textTheme: TextTheme( +// //设置Material的默认字体样式 +// body1: TextStyle(color: Color(0xFF888888), fontSize: 16.0), +// ), +// iconTheme: IconThemeData( +// color: Color(ThemeColor), +// size: 35.0, +// ), +// ), +// home: new MyHomePage(), +// onGenerateRoute: Application.router.generator, +// ); +// } +// } diff --git a/lib/widgets/themes/Material/MaterialApp/index.dart b/lib/widgets/themes/Material/MaterialApp/index.dart new file mode 100644 index 00000000..9fce5d86 --- /dev/null +++ b/lib/widgets/themes/Material/MaterialApp/index.dart @@ -0,0 +1,53 @@ +/* + * @Author: 一凨 + * @Date: 2018-12-27 16:25:22 + * @Last Modified by: 一凨 + * @Last Modified time: 2019-01-07 15:52:45 + */ +import 'package:flutter/material.dart'; +import '../../../../common/widget_demo.dart'; + +const String content0 = ''' +### **简介** +> MaterialApp 代表 Material 设计风格的应用 +- 包含许多 Material设计风格所需要的一些基本控件 +- 在 WidgetsApp 中通过添加一些特定与 Material 设计风格的属性 +'''; + +const String content1 = ''' +### **基本用法** +> 这里我们着重介绍MaterialApp 主要属性 +- title ： 在任务管理窗口中所显示的应用名字 +- theme ： 应用各种 UI 所使用的主题颜色 +- color ： 应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色 +- home ： 应用默认所显示的界面 Widget +- routes ： 应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址 +- initialRoute ：第一个显示的路由名字，默认值为 Window.defaultRouteName +- onGenerateRoute ： 生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面 +- onLocaleChanged ： 当系统修改语言的时候，会触发å这个回调 +- navigatorObservers ： 应用 Navigator 的监听器 +- debugShowMaterialGrid ： 是否显示 Material design 基础布局网格，用来调试 UI 的工具 +- showPerformanceOverlay ： 显示性能标签 +- checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关 + +'''; + +class Demo extends StatefulWidget { + static const String routeName = '/themes/Material/MaterialApp'; + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + contentList: [ + content0, + content1, + ], + title: 'MaterialApp', + docUrl: 'https://docs.flutter.io/flutter/material/MaterialApp-class.html', + codeUrl: '../main.dart', + ); + } +} \ No newline at end of file diff --git a/lib/widgets/themes/Material/MaterialButton/demo.dart b/lib/widgets/themes/Material/MaterialButton/demo.dart new file mode 100644 index 00000000..03a5436e --- /dev/null +++ b/lib/widgets/themes/Material/MaterialButton/demo.dart @@ -0,0 +1,51 @@ +/* + * @Author: 一凨 + * @Date: 2018-12-27 16:25:25 + * @Last Modified by: 一凨 + * @Last Modified time: 2018-12-27 16:25:25 + */ +import 'package:flutter/material.dart'; + +class MaterialButtonDemo extends StatelessWidget { + final TextStyle txtStyle = TextStyle(color: Colors.white); + + @override + Widget build(BuildContext context) { + return Container( + child: Column( + children: [ + MaterialButton( + onPressed: () { + print('click MaterialButton'); + }, + child: Text( + 'MaterialButton', + style: txtStyle, + ), + color: Theme.of(context).primaryColor, + ), + FlatButton.icon( + icon: Icon( + Icons.bubble_chart, + color: Colors.white, + ), + label: Text( + 'FlatButton', + style: txtStyle, + ), + onPressed: () { + print('click FlatButton'); + }, + color: Theme.of(context).primaryColor, + ), + RaisedButton( + onPressed: () { + print('click RaisedButton'); + }, + child: Text('RaisedButton'), + ) + ], + ), + ); + } +} diff --git a/lib/widgets/themes/Material/MaterialButton/index.dart b/lib/widgets/themes/Material/MaterialButton/index.dart new file mode 100644 index 00000000..6658e2f2 --- /dev/null +++ b/lib/widgets/themes/Material/MaterialButton/index.dart @@ -0,0 +1,47 @@ +/* + * @Author: 一凨 + * @Date: 2018-12-27 16:25:22 + * @Last Modified by: 一凨 + * @Last Modified time: 2018-12-27 16:35:39 + */ +import 'package:flutter/material.dart'; +import '../../../../common/widget_demo.dart'; +import './demo.dart'; + +const String content0 = ''' +### **简介** +> 用于构建一个依赖于ButtonThem 和 Theme的按钮widget +- 如果有必要，按钮的大小是自是适配于其子widget的 +- 最好不要直接使用这个widget，而应该可以考虑使用FlatButton、OutlineButton或者RaiseButton,他们包含一些和主题风格相适配的一些基础样式 +- 如果要直接创建按钮而不继承主题默认值，可以考虑使用 RawMaterialButton +- 如果想使用ink-splash的效果但是又不想使用button，可以考虑使用InkWell +'''; +const String content1 = ''' +### **基本用法** +> 尽量不要直接使用 MaterialButton +- 如果 MaterialButton上的onPress为null，则按钮处于被禁用状态 +- IconButton 可以创建一些带有 图标的按钮 +'''; + +class Demo extends StatefulWidget { + static const String routeName = '/themes/Material/MaterialButton'; + + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + contentList: [ + content0, + content1, + MaterialButtonDemo(), + ], + title: 'MaterialButton', + codeUrl: 'Material/MaterialButton/demo.dart', + docUrl: + 'https://docs.flutter.io/flutter/material/MaterialButton-class.html', + ); + } +} diff --git a/lib/widgets/themes/Material/MaterialColor/demo.dart b/lib/widgets/themes/Material/MaterialColor/demo.dart new file mode 100644 index 00000000..003163b3 --- /dev/null +++ b/lib/widgets/themes/Material/MaterialColor/demo.dart @@ -0,0 +1,230 @@ +/* + * @Author: 一凨 + * @Date: 2018-12-27 16:25:25 + * @Last Modified by: 一凨 + * @Last Modified time: 2018-12-27 16:25:25 + */ +import 'package:flutter/material.dart'; + +const double kColorItemHeight = 48.0; + +class Palette { + Palette({this.name, this.primary, this.accent, this.threshold = 900}); + + final String name; + final MaterialColor primary; + + /** + * MaterialAccentColor：定义单一的色滴，颜色的阴影用索引表示， + * 索引比较小的颜色比较浅，较大的索引较暗 + */ + final MaterialAccentColor accent; + final int + threshold; // titles for indices > threshold are white, otherwise black + + bool get isValid => name != null && primary != null && threshold != null; +} + +final List allPalettes = [ + Palette( + name: 'RED', + primary: Colors.red, + accent: Colors.redAccent, + threshold: 300), + Palette( + name: 'PINK', + primary: Colors.pink, + accent: Colors.pinkAccent, + threshold: 200), + Palette( + name: 'PURPLE', + primary: Colors.purple, + accent: Colors.purpleAccent, + threshold: 200), + Palette( + name: 'DEEP PURPLE', + primary: Colors.deepPurple, + accent: Colors.deepPurpleAccent, + threshold: 200), + Palette( + name: 'INDIGO', + primary: Colors.indigo, + accent: Colors.indigoAccent, + threshold: 200), + Palette( + name: 'BLUE', + primary: Colors.blue, + accent: Colors.blueAccent, + threshold: 400), + Palette( + name: 'LIGHT BLUE', + primary: Colors.lightBlue, + accent: Colors.lightBlueAccent, + threshold: 500), + Palette( + name: 'CYAN', + primary: Colors.cyan, + accent: Colors.cyanAccent, + threshold: 600), + Palette( + name: 'TEAL', + primary: Colors.teal, + accent: Colors.tealAccent, + threshold: 400), + Palette( + name: 'GREEN', + primary: Colors.green, + accent: Colors.greenAccent, + threshold: 500), + Palette( + name: 'LIGHT GREEN', + primary: Colors.lightGreen, + accent: Colors.lightGreenAccent, + threshold: 600), + Palette( + name: 'LIME', + primary: Colors.lime, + accent: Colors.limeAccent, + threshold: 800), + Palette(name: 'YELLOW', primary: Colors.yellow, accent: Colors.yellowAccent), + Palette(name: 'AMBER', primary: Colors.amber, accent: Colors.amberAccent), + Palette( + name: 'ORANGE', + primary: Colors.orange, + accent: Colors.orangeAccent, + threshold: 700), + Palette( + name: 'DEEP ORANGE', + primary: Colors.deepOrange, + accent: Colors.deepOrangeAccent, + threshold: 400), + Palette(name: 'BROWN', primary: Colors.brown, threshold: 200), + Palette(name: 'GREY', primary: Colors.grey, threshold: 500), + Palette(name: 'BLUE GREY', primary: Colors.blueGrey, threshold: 500), +]; + +class ColorItem extends StatelessWidget { + const ColorItem({ + Key key, + @required this.index, + @required this.color, + this.prefix = '', + }) : assert(index != null), + assert(color != null), + assert(prefix != null), + super(key: key); + + final int index; + final Color color; + final String prefix; + + String colorString() => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + @override + Widget build(BuildContext context) { + return Semantics( + container: true, + child: Container( + height: kColorItemHeight, + padding: const EdgeInsets.symmetric(horizontal: 16.0), + color: color, + child: SafeArea( + top: false, + bottom: false, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text('$prefix$index'), + Text(colorString()), + ], + ), + ), + ), + ); + } +} + +class PaletteTabView extends StatelessWidget { + PaletteTabView({ + Key key, + @required this.colors, + }) : assert(colors != null && colors.isValid), + super(key: key); + + final Palette colors; + + static const List primaryKeys = [ + 50, + 100, + 200, + 300, + 400, + 500, + 600, + 700, + 800, + 900 + ]; + static const List accentKeys = [100, 200, 400, 700]; + + @override + Widget build(BuildContext context) { + final TextTheme textTheme = Theme.of(context).textTheme; + final TextStyle whiteTextStyle = + textTheme.body1.copyWith(color: Colors.white); + final TextStyle blackTextStyle = + textTheme.body1.copyWith(color: Colors.black); + final List colorItems = primaryKeys.map((int index) { + return DefaultTextStyle( + style: index > colors.threshold ? whiteTextStyle : blackTextStyle, + child: ColorItem(index: index, color: colors.primary[index]), + ); + }).toList(); + + if (colors.accent != null) { + colorItems.addAll(accentKeys.map((int index) { + return DefaultTextStyle( + style: index > colors.threshold ? whiteTextStyle : blackTextStyle, + child: + ColorItem(index: index, color: colors.accent[index], prefix: 'A'), + ); + }).toList()); + } + + return ListView( + itemExtent: kColorItemHeight, + children: colorItems, + ); + } +} + +class ColorDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + height: 1000.0, + child: DefaultTabController( + length: allPalettes.length, + child: Scaffold( + appBar: AppBar( + elevation: 0.0, + title: const Text('Colors'), + bottom: TabBar( + isScrollable: true, + tabs: allPalettes + .map((Palette swatch) => Tab(text: swatch.name)) + .toList(), + ), + ), + body: TabBarView( + children: allPalettes.map((Palette colors) { + return PaletteTabView(colors: colors); + }).toList(), + ), + ), + ), + ); + } +} diff --git a/lib/widgets/themes/Material/MaterialColor/index.dart b/lib/widgets/themes/Material/MaterialColor/index.dart new file mode 100644 index 00000000..106346a1 --- /dev/null +++ b/lib/widgets/themes/Material/MaterialColor/index.dart @@ -0,0 +1,44 @@ +/* + * @Author: 一凨 + * @Date: 2018-12-27 16:25:22 + * @Last Modified by: 一凨 + * @Last Modified time: 2018-12-27 16:35:39 + */ +import 'package:flutter/material.dart'; +import '../../../../common/widget_demo.dart'; +import './demo.dart'; + +const String content0 = ''' +### **简介** +> 定义单色以及具有十种色调的色样 +- 颜色的阴影由索引引用。指数越大，颜色越深。总共有十个有效指数：50、100、200、...、900. +'''; + +const String content1 = ''' +### **基础用法** +> 这里我们配合Icon来进行演示 +- 颜色的值应与指数500和shade500的值相同 +'''; + +class Demo extends StatefulWidget { + static const String routeName = '/themes/Material/MaterialColor'; + + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + contentList: [ + content0, + content1, + ColorDemo(), + ], + title: "MaterialColor", + codeUrl: 'Material/MaterialColor/demo.dart', + docUrl: + 'https://docs.flutter.io/flutter/material/MaterialColor-class.html', + ); + } +} diff --git a/lib/widgets/themes/Material/MaterialPageRoute/demo.dart b/lib/widgets/themes/Material/MaterialPageRoute/demo.dart new file mode 100644 index 00000000..260e078f --- /dev/null +++ b/lib/widgets/themes/Material/MaterialPageRoute/demo.dart @@ -0,0 +1,103 @@ +import 'package:flutter/material.dart'; + +class User { + final String account, email; + + const User({ + this.account, + this.email, + }); +} + +class FirstPage extends StatefulWidget { + _FirstPageState createState() => _FirstPageState(); +} + +class _FirstPageState extends State { + var _usernameController = new TextEditingController(); + var _emailController = new TextEditingController(); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Padding( + child: new Text( + "账号登录", + textAlign: TextAlign.center, + style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ), + padding: EdgeInsets.only(bottom: 10.0), + ), + TextFormField( + decoration: InputDecoration(labelText: 'account'), + controller: _usernameController, + ), + TextFormField( + decoration: InputDecoration(labelText: "email"), + controller: _emailController, + ), + new RaisedButton( + child: Text("点击跳转"), + onPressed: () { + var route = new MaterialPageRoute( + builder: (BuildContext context) => new SecondPage( + value: User( + account: _usernameController.text, + email: _emailController.text)), + ); + Navigator.of(context).push(route); + }, + ) + ], + ); + } +} + +class SecondPage extends StatefulWidget { + final User value; + + SecondPage({Key key, this.value}) : super(key: key); + + _SecondPageState createState() => _SecondPageState(); +} + +class _SecondPageState extends State { + @override + Widget build(BuildContext context) { + return new Scaffold( + appBar: new AppBar( + title: Text("MaterialPageRoute2"), + ), + body: new Container( + child: new Center( + child: Column( + children: [ + Container( + padding: EdgeInsets.only(top: 30.0), + child: new Text("登陆成功！！！", + style: TextStyle( + fontSize: 28, fontWeight: FontWeight.bold))), + Padding( + child: new Text( + 'account:${widget.value.account}', + textAlign: TextAlign.center, + style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), + ), + padding: EdgeInsets.only(bottom: 20.0, top: 40.0), + ), + Padding( + child: new Text( + 'email:${widget.value.email}', + textAlign: TextAlign.center, + style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), + ), + padding: EdgeInsets.only(bottom: 20.0), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/widgets/themes/Material/MaterialPageRoute/index.dart b/lib/widgets/themes/Material/MaterialPageRoute/index.dart new file mode 100644 index 00000000..fee37767 --- /dev/null +++ b/lib/widgets/themes/Material/MaterialPageRoute/index.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_rookie_book/common/widget_demo.dart'; +import './demo.dart'; + +const Text0 = ''' +### **简介** +> 页面跳转携带参数替换整个屏幕的页面路由。 +- 对于Android，页面的进入以下方滑动向上，页面退出，以上方滑动向下方。在ios上，页面进度从右边滑入，退出相反。 +- 默认情况下，当路由器被另外一个替换时，前一个路由将被保留在内存中，如果希望在不需要的时候能够释放资源，请将maintainState设置为false +'''; + +const String Text1 = """ +### **基本用法** +> 如下图示例： + +"""; + +class Demo extends StatefulWidget { + static const String routeName = '/element/themes/Material/MaterialPageRoute'; + + @override + State createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + title: 'MaterialPageRoute', + codeUrl: 'elements/themes/Material/MaterialPageRoute', + docUrl: + 'https://docs.flutter.io/flutter/material/MaterialPageRoute-class.html', + contentList: [ + Text0, + Text1, + FirstPage(), + ], + ); + } +} diff --git a/lib/widgets/themes/Material/MergeableMaterialItem/demo.dart b/lib/widgets/themes/Material/MergeableMaterialItem/demo.dart new file mode 100644 index 00000000..df54a53e --- /dev/null +++ b/lib/widgets/themes/Material/MergeableMaterialItem/demo.dart @@ -0,0 +1,70 @@ +/* + * @Author: xiaojia.dxj + * @Date: 2019-01-08 11:33:21 + * @Last Modified by: xiaojia.dxj + * @Last Modified time: 2019-01-08 15:24:14 + */ +import 'package:flutter/material.dart'; + +class MergeableMaterialItemDemo extends StatefulWidget { + _MergeableMaterialItemState createState() => _MergeableMaterialItemState(); +} + +class _MergeableMaterialItemState extends State { + final List items = []; + bool currIndex = false; + int currIndexNum = 1; + + _isChildExpanded() { + setState(() { + currIndex ? currIndex = false : currIndex = true; + currIndexNum++; + }); + } + + @override + Widget build(BuildContext context) { + items.add( + /** + * class MaterialSlice extends MergeableMaterialItem + */ + new MaterialSlice( + key: new ValueKey(currIndexNum), + child: new Column(children: [ + // header, + new AnimatedCrossFade( + firstChild: new Container( + height: 20.0, + width: 20.0, + color: Colors.green, + ), + secondChild: new Container( + height: 20.0, + width: 20.0, + color: Colors.red, + ), + crossFadeState: currIndex + ? CrossFadeState.showSecond + : CrossFadeState.showFirst, + firstCurve: + const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn), + secondCurve: + const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn), + sizeCurve: Curves.fastOutSlowIn, + duration: Duration(microseconds: 6), + ) + ]))); + + return Column( + children: [ + new MergeableMaterial(hasDividers: true, children: items), + new RaisedButton( + child: Text("点击添加"), + onPressed: () { + _isChildExpanded(); + }, + ) + ], + ); + } +} diff --git a/lib/widgets/themes/Material/MergeableMaterialItem/index.dart b/lib/widgets/themes/Material/MergeableMaterialItem/index.dart new file mode 100644 index 00000000..7bd1a322 --- /dev/null +++ b/lib/widgets/themes/Material/MergeableMaterialItem/index.dart @@ -0,0 +1,45 @@ +/* + * @Author: xiaojia.dxj + * @Date: 2019-01-07 16:36:43 + * @Last Modified by: xiaojia.dxj + * @Last Modified time: 2019-01-08 14:12:32 + */ + +import 'package:flutter/material.dart'; +import '../../../../common/widget_demo.dart'; +import './demo.dart'; + +const String content0 = ''' +### **简介** +> MaterialSlice 和 MaterialGap的基本类型 +- 所有的MergeableMaterialItem对象都需要LocalKey +'''; + +const String content1 = ''' +### **基础用法** +> MaterialSlice进行演示 +- MaterialSlice做为 MergeableMaterial子类。它作为Material,可以和其他的slices合并使用 +'''; + +class Demo extends StatefulWidget { + static const String routeName = '/themes/Material/MergeableMaterialItem'; + + _DemoState createState() => _DemoState(); +} + +class _DemoState extends State { + @override + Widget build(BuildContext context) { + return WidgetDemo( + contentList: [ + content0, + content1, + MergeableMaterialItemDemo(), + ], + title: "MergeableMaterialItem", + codeUrl: 'Material/MergeableMaterialItem/demo.dart', + docUrl: + 'https://docs.flutter.io/flutter/material/MergeableMaterialItem-class.html', + ); + } +} diff --git a/lib/widgets/themes/Material/index.dart b/lib/widgets/themes/Material/index.dart new file mode 100644 index 00000000..8c36a63f --- /dev/null +++ b/lib/widgets/themes/Material/index.dart @@ -0,0 +1,45 @@ +import "package:flutter/material.dart"; +import '../../../model/widget.dart'; + +import 'MaterialPageRoute/index.dart' as MaterialPageRoute; +import 'MaterialAccentColor/index.dart' as MaterialAccentColor; +import 'MaterialApp/index.dart' as MaterialApp; +import 'MaterialButton/index.dart' as MaterialButton; +import 'MaterialColor/index.dart' as MaterialColor; +import 'MergeableMaterialItem/index.dart' as MergeableMaterialItem; + + +List widgetPoints = [ + WidgetPoint( + name: 'MaterialPageRoute', + routerName: MaterialPageRoute.Demo.routeName, + buildRouter: (BuildContext context) => MaterialPageRoute.Demo(), + ), + WidgetPoint( + name: 'MaterialApp', + routerName: MaterialApp.Demo.routeName, + buildRouter: (BuildContext context) => MaterialApp.Demo(), + ), + WidgetPoint( + name: 'MaterialColor', + routerName: MaterialColor.Demo.routeName, + buildRouter: (BuildContext context) => MaterialColor.Demo(), + ), + WidgetPoint( + name: 'MaterialButton', + routerName: MaterialButton.Demo.routeName, + buildRouter: (BuildContext context) => MaterialButton.Demo(), + ), + +WidgetPoint( + name: 'MaterialAccentColor', + routerName: MaterialAccentColor.Demo.routeName, + buildRouter: (BuildContext context) => MaterialAccentColor.Demo(), + ), + WidgetPoint( + name: 'MergeableMaterialItem', + routerName: MergeableMaterialItem.Demo.routeName, + buildRouter: (BuildContext context) => MergeableMaterialItem.Demo(), + ), + +]; diff --git a/lib/widgets/themes/index.dart b/lib/widgets/themes/index.dart index e69de29b..e7a62e6c 100644 --- a/lib/widgets/themes/index.dart +++ b/lib/widgets/themes/index.dart @@ -0,0 +1,14 @@ +/* + * @Author: xiaojia.dxj + * @Date: 2018-12-24 16:31:09 + * @Last Modified by: xiaojia.dxj + * @Last Modified time: 2018-12-24 16:31:09 + */ + +import './Material/index.dart' as Material; + +List getWidgets() { + List result = []; + result.addAll(Material.widgetPoints); + return result; +} \ No newline at end of file