summary

Semantics may be a strange component of Flutter, and most people would not think of using Semantics in their development if they had not encountered it. The structure is as follows:

  Semantics({
    Key? key,
    Widget? child,
    bool container = false,
    bool explicitChildNodes = false,
    bool excludeSemantics = false,
    bool? enabled,
    bool? checked,
    bool? selected,
    bool? toggled,
    bool? button,
    bool? slider,
    bool? link,
    bool? header,
    bool? textField,
    bool? readOnly,
    bool? focusable,
    bool? focused,
    bool? inMutuallyExclusiveGroup,
    bool? obscured,
    bool? multiline,
    bool? scopesRoute,
    bool? namesRoute,
    bool? hidden,
    bool? image,
    bool? liveRegion,
    int? maxValueLength,
    int? currentValueLength,
    String? label,
    String? value,
    String? increasedValue,
    String? decreasedValue,
    String? hint,
    String? onTapHint,
    String? onLongPressHint,
    TextDirection? textDirection,
    SemanticsSortKey? sortKey,
    SemanticsTag? tagForChildren,
    VoidCallback? onTap,
    VoidCallback? onLongPress,
    VoidCallback? onScrollLeft,
    VoidCallback? onScrollRight,
    VoidCallback? onScrollUp,
    VoidCallback? onScrollDown,
    VoidCallback? onIncrease,
    VoidCallback? onDecrease,
    VoidCallback? onCopy,
    VoidCallback? onCut,
    VoidCallback? onPaste,
    VoidCallback? onDismiss,
    MoveCursorHandler? onMoveCursorForwardByCharacter,
    MoveCursorHandler? onMoveCursorBackwardByCharacter,
    SetSelectionHandler? onSetSelection,
    VoidCallback? onDidGainAccessibilityFocus,
    VoidCallback? onDidLoseAccessibilityFocus,
    Map<CustomSemanticsAction, VoidCallback>? customSemanticsActions,
  }) : this.fromProperties(...)
Copy the code

There are approximately 54 parameters ？？？？？A widget that describes the specific semantics of the widget tree. Use assistive tools, search engines, and other semantic analysis software to determine the meaning of your application. More confused after watching it? The English language is a form of Semantics that is used to analyze what is on the screen and to translate the program into plain English and to help visually impaired people use the software better.

Semantics on the other hand is the component that developers are most familiar with?All of these attributes are involved in various components that are commonly used, and basically all components that developers use most often find their place in Semantics.

use

Attribute interpretation

attribute meaning
child Child components
container Whether a new semantic node is being introduced
explicitChildNodes Whether to force the display of semantic information for child widgets
excludeSemantics Whether to exclude semantics from child widgets
enabled Whether the available
checked Check whether the CheckBox is selected
selected If the selected
toggled Whether to toggle
button Whether or not the Button
slider Whether the slider
link Whether the link
header Whether the header
textField Whether the textField
readOnly Whether the system
focusable Whether focatable or not
focused Whether or not the focus
inMutuallyExclusiveGroup Whether or not compatible
obscured Whether the fuzzy
multiline If multiple lines
scopesRoute Whether to declare the route name
namesRoute Whether to contain semantic labels of routes
hidden Whether to hide
image Whether the image
liveRegion Whether active
maxValueLength The maximum length
currentValueLength The current length
label The text description of the Widget
value value
increasedValue value-added
decreasedValue impairment
hint prompt
onTapHint Click on the hint
onLongPressHint Long according to the prompt
textDirection The text direction
sortKey The sorting
tagForChildren Child node label
onTap Click on the event
onLongPress Long press event
onScrollLeft The left sliding event
onScrollRight The right sliding event
onScrollUp Slide the event
onScrollDown In event
onIncrease Appreciation event
onDecrease Impairment events
onCopy copy
onCut cut
onPaste paste
onDismiss dismiss
onMoveCursorForwardByCharacter The character cursor moves forward
onMoveCursorBackwardByCharacter The character cursor moves back
onSetSelection Select events
onDidGainAccessibilityFocus Get focus
onDidLoseAccessibilityFocus Lose focus
customSemanticsActions Custom events

Sorry for the inaccurate translation!

classification

  • Semantics

A widget that describes the specific semantics of the widget tree. Use assistive tools, search engines, and other semantic analysis software to determine the meaning of your application.

  • MergeSemantics

A widget that incorporates the semantics of its descendants.

  • ExcludeSemantics

Remove any widget whose descendants have any semantics

use

          Flexible(
            child: Semantics(
              label: MaterialLocalizations.of(context).selectYearSemanticsLabel,
              excludeSemantics: true,
              button: true,
              child: Container(
                height: _subHeaderHeight,
                 child: InkWell(
                     onTap: widget.onTitlePressed,
                     ...
Copy the code

Explain InkWell, i.e. what is the button on the screen

        // dayWidget
        child: Semantics(
              label: '${localizations.formatDecimal(day)}, ${localizations.formatFullDate(dayToBuild)}',
              selected: isSelectedDay,
              excludeSemantics: true,
              child: dayWidget,
            ),
            ...

dayItems.add(dayWidget);
Copy the code

DayWidget is a component of the calendar that comes with Flutter. Finally, add all the days of the month to the dayItems list to display the calendar of the month in one place. label: ‘ localizations.formatDecimal(day),{localizations.formatDecimal(day)}, Localizations. FormatDecimal (day), {localizations. FormatFullDate (dayToBuild)} ‘, is explained which day is the day, excludeSemantics: True: deletes any descendant widget with semantics. If any descendant widget has semantics, it is not recognized and invalid.

.return MergeSemantics(
      child: Semantics(
        enabled: widget.enabled,
        button: true,
        child: InkWell(
          onTap: widget.enabled ? handleTap : null, canRequestFocus: widget.enabled, mouseCursor: effectiveMouseCursor, child: item, ), ) ); .Copy the code

This is part of the PopupMenuItem code. MergeSemantics merges the child widgets semantics, and if there are other items in a PopupMenuItem, they merge into one.

note

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      showSemanticsDebugger:true.Copy the code

If the showSemanticsDebugger is set to false and true, different views will appear:

It is obvious that when showSemanticsDebugger is true, the view is much different, less aesthetically pleasing, but much easier to read and manipulate, which is why Semantics is often used to help visually impaired people.

In this paper, many attributes are not clearly explained, and the description of the use method is not clear. In the final analysis, I am not familiar with it, and more exploration is needed in the future. The data in the screenshot are all fake data and cannot be compared.