Udostępnij za pośrednictwem

Redaktor

  • Artykuł

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) Editor umożliwia wprowadzanie i edytowanie wielu wierszy tekstu.

Editor definiuje następujące właściwości:

  • AutoSize, typu EditorAutoSizeOption, określa, czy edytor zmieni rozmiar, aby uwzględnić dane wejściowe użytkownika. Domyślnie edytor nie ma automatycznego rozmiaru.
  • HorizontalTextAlignment, typu TextAlignment, definiuje wyrównanie w poziomie tekstu.
  • VerticalTextAlignment, typu TextAlignment, definiuje wyrównanie w pionie tekstu.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Ponadto Editor definiuje Completed zdarzenie, które jest wywoływane, gdy użytkownik finalizuje tekst w Editor obiekcie za pomocą klucza zwrotnego.

Editor pochodzi z InputView klasy, z której dziedziczy następujące właściwości:

  • CharacterSpacing, typu double, ustawia odstępy między znakami we wprowadzonym tekście.
  • CursorPosition, typu int, definiuje położenie kursora w edytorze.
  • FontAttributes, typu FontAttributes, określa styl tekstu.
  • FontAutoScalingEnabled, typu bool, określa, czy tekst będzie odzwierciedlać preferencje skalowania ustawione w systemie operacyjnym. Wartość domyślna tej właściwości to true.
  • FontFamily, typu string, definiuje rodzinę czcionek.
  • FontSize, typu double, definiuje rozmiar czcionki.
  • IsReadOnly, typu bool, określa, czy użytkownik nie powinien modyfikować tekstu. Wartość domyślna tej właściwości to false.
  • IsSpellCheckEnabled, typu bool, określa, czy sprawdzanie pisowni jest włączone.
  • IsTextPredictionEnabled, typu bool, określa, czy włączono przewidywanie tekstu i automatyczną korektę tekstu.
  • Keyboard, typu Keyboard, określa miękką klawiaturę wejściową wyświetlaną podczas wprowadzania tekstu.
  • MaxLength, typu int, definiuje maksymalną długość danych wejściowych.
  • Placeholder, typu string, definiuje tekst wyświetlany, gdy kontrolka jest pusta.
  • PlaceholderColor, typu Color, definiuje kolor tekstu zastępczego.
  • SelectionLength, typu int, reprezentuje długość zaznaczonego tekstu w kontrolce.
  • Text, typu string, definiuje tekst wprowadzony w kontrolce.
  • TextColor, typu Color, definiuje kolor wprowadzonego tekstu.
  • TextTransform, typu TextTransform, określa wielkość liter wprowadzonego tekstu.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Ponadto InputView definiuje TextChanged zdarzenie, które jest zgłaszane, gdy tekst w Editor zmianach. Obiekt TextChangedEventArgs , który towarzyszy TextChanged zdarzeniu, ma NewTextValue właściwości i OldTextValue , które określają odpowiednio nowy i stary tekst.

Aby uzyskać informacje na temat określania czcionek na obiekcie Editor, zobacz Czcionki.

Tworzenie edytora

W poniższym przykładzie pokazano, jak utworzyć element Editor:

<Editor x:Name="editor"
        Placeholder="Enter your response here"
        HeightRequest="250"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />

Równoważny kod języka C# to:

Editor editor = new Editor { Placeholder = "Enter text", HeightRequest = 250 };
editor.TextChanged += OnEditorTextChanged;
editor.Completed += OnEditorCompleted;

Poniższy zrzut ekranu przedstawia wynikowy Editor w systemie Android:

Zrzut ekranu przedstawiający podstawowy edytor w systemie Android.

Uwaga

W systemie iOS klawiatura wprowadzania nietrwałego może obejmować pole wprowadzania tekstu, gdy pole znajduje się w dolnej części ekranu, co utrudnia wprowadzanie tekstu. Jednak w aplikacji .NET MAUI dla systemu iOS strony automatycznie przewijają się, gdy klawiatura nietrwała będzie obejmować pole wprowadzania tekstu, aby pole było powyżej klawiatury nietrwałej wprowadzania. Metodę KeyboardAutoManagerScroll.Disconnect w Microsoft.Maui.Platform przestrzeni nazw można wywołać, aby wyłączyć to domyślne zachowanie. Metodę KeyboardAutoManagerScroll.Connect można wywołać, aby ponownie włączyć zachowanie po jej wyłączeniu.

Dostęp do wprowadzonego Text tekstu można uzyskać, odczytując właściwość , a TextChanged zdarzenia i Completed sygnalizuje, że tekst został zmieniony lub ukończony.

Zdarzenie TextChanged jest wywoływane, gdy tekst w Editor zmianach i TextChangedEventArgs podaj tekst przed i po zmianie za pomocą OldTextValue właściwości i NewTextValue :

void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
    string myText = editor.Text;
}

Zdarzenie Completed jest wywoływane tylko w systemie Windows, gdy użytkownik zakończył wprowadzanie, naciskając Tab na klawiaturze lub koncentrując inną kontrolkę. Procedura obsługi zdarzenia to ogólny program obsługi zdarzeń:

void OnEditorCompleted(object sender, EventArgs e)
{
   string text = ((Editor)sender).Text;
}

Ustawianie odstępów między znakami

Odstępy między znakami można zastosować do obiektu Editor , ustawiając CharacterSpacing właściwość na double wartość:

<Editor ...
        CharacterSpacing="10" />

Wynikiem jest to, że znaki w tekście wyświetlanym przez Editor element są oddzielone CharacterSpacing od siebie jednostkami niezależnymi od urządzenia.

Uwaga

Wartość CharacterSpacing właściwości jest stosowana do tekstu wyświetlanego Text przez właściwości i Placeholder .

Ogranicz długość danych wejściowych

Właściwość MaxLength może służyć do ograniczenia długości wejściowej dozwolonej dla elementu Editor. Ta właściwość powinna być ustawiona na dodatnią liczbę całkowitą:

<Editor ... MaxLength="10" />

MaxLength Wartość właściwości 0 wskazuje, że żadne dane wejściowe nie będą dozwolone, a wartość int.MaxValue, która jest wartością domyślną Editorelementu , wskazuje, że nie ma obowiązującego limitu liczby znaków, które mogą zostać wprowadzone.

Automatyczne ustawianie rozmiaru edytora

Element Editor można ustawić w celu automatycznego rozmiaru zawartości, ustawiając Editor.AutoSize właściwość na TextChangeswartość , która jest wartością EditorAutoSizeOption wyliczenia. Ta wyliczenie ma dwie wartości:

  • Disabled wskazuje, że automatyczna zmiana rozmiaru jest wyłączona i jest wartością domyślną.
  • TextChanges wskazuje, że włączono automatyczną zmianę rozmiaru.

Można to zrobić w następujący sposób:

<Editor Text="Enter text here"
        AutoSize="TextChanges" />

Po włączeniu automatycznego zmieniania rozmiaru wysokość Editor obiektu zwiększy się, gdy użytkownik wypełni go tekstem, a wysokość spadnie wraz z usunięciem tekstu przez użytkownika. Może to służyć do zapewnienia prawidłowego Editor DataTemplate rozmiaru obiektów w rozmiarze CollectionView .

Ważne

Ustawienie Editor właściwości nie spowoduje automatycznego rozmiaru HeightRequest , jeśli właściwość została ustawiona.

Przekształcanie tekstu

Obiekt Editor może przekształcić wielkość liter tekstu przechowywanego Text we właściwości, ustawiając TextTransform właściwość na wartość TextTransform wyliczenia. Ta wyliczenie ma cztery wartości:

  • None wskazuje, że tekst nie zostanie przekształcony.
  • Default wskazuje, że będzie używane domyślne zachowanie platformy. Jest to wartość domyślna TextTransform właściwości.
  • Lowercase wskazuje, że tekst zostanie przekształcony w małe litery.
  • Uppercase wskazuje, że tekst zostanie przekształcony na wielkie litery.

W poniższym przykładzie pokazano przekształcanie tekstu na wielkie litery:

<Editor Text="This text will be displayed in uppercase."
        TextTransform="Uppercase" />

Dostosowywanie klawiatury

Klawiatura, która jest wyświetlana, gdy użytkownicy wchodzą w interakcję z elementem Editor , można ustawić programowo za pośrednictwem Keyboard właściwości na jedną z następujących właściwości klasy Keyboard :

  • Chat — używany do tworzenia tekstu i miejsc, w których emoji są przydatne.
  • Default — klawiatura domyślna.
  • Email — używane podczas wprowadzania adresów e-mail.
  • Numeric — używane podczas wprowadzania liczb.
  • Plain — używany podczas wprowadzania tekstu bez żadnego określonego KeyboardFlags .
  • Telephone – używane podczas wprowadzania numerów telefonów.
  • Text — używany podczas wprowadzania tekstu.
  • Url — służy do wprowadzania ścieżek plików i adresów internetowych.

W poniższym przykładzie pokazano ustawienie Keyboard właściwości:

<Editor Keyboard="Chat" />

Klasa Keyboard ma również metodę Create fabryki, która może służyć do dostosowywania klawiatury przez określenie wielkich liter, sprawdzania pisowni i zachowania sugestii. KeyboardFlags Wartości wyliczenia są określane jako argumenty metody, przy czym zwracana jest niestandardowa Keyboard wartość . Wyliczenie KeyboardFlags zawiera następujące wartości:

  • None — do klawiatury nie są dodawane żadne funkcje.
  • CapitalizeSentence – wskazuje, że pierwsza litera pierwszego wyrazu każdego wprowadzonego zdania zostanie automatycznie wpisana literą.
  • Spellcheck — wskazuje, że sprawdzanie pisowni będzie wykonywane na wprowadzonym tekście.
  • Suggestions — wskazuje, że uzupełnianie wyrazów będzie oferowane dla wprowadzonego tekstu.
  • CapitalizeWord — wskazuje, że pierwsza litera każdego wyrazu będzie automatycznie wielkich liter.
  • CapitalizeCharacter — wskazuje, że każdy znak będzie automatycznie wielkich liter.
  • CapitalizeNone — wskazuje, że nie nastąpi automatyczna kapitalizowanie.
  • All — wskazuje, że w wprowadzonym tekście wystąpi sprawdzanie pisowni, uzupełnianie wyrazów i wielkie litery zdań.

Poniższy przykład kodu XAML pokazuje, jak dostosować wartość domyślną Keyboard , aby oferować uzupełnianie wyrazów i wielką literę każdego wprowadzonego znaku:

<Editor>
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

Równoważny kod języka C# to:

Editor editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Ukryj i pokaż miękką klawiaturę wejściową

Klasa SoftInputExtensions w Microsoft.Maui przestrzeni nazw udostępnia szereg metod rozszerzeń, które obsługują interakcję z klawiaturą nietrwałą wprowadzania w kontrolkach obsługujących wprowadzanie tekstu. Klasa definiuje następujące metody:

  • IsSoftInputShowing, który sprawdza, czy urządzenie jest obecnie wyświetlane miękkie klawiatury wejściowej.
  • HideSoftInputAsync, który podejmie próbę ukrycia miękkiej klawiatury wejściowej, jeśli jest ona obecnie wyświetlana.
  • ShowSoftInputAsync, który podejmie próbę wyświetlenia klawiatury nietrwałej wprowadzania, jeśli jest ona obecnie ukryta.

W poniższym przykładzie pokazano, jak ukryć klawiaturę wprowadzania nietrwałego Editor na nazwie editor, jeśli jest ona obecnie wyświetlana:

if (editor.IsSoftInputShowing())
    await editor.HideSoftInputAsync(System.Threading.CancellationToken.None);

Włączanie i wyłączanie sprawdzania pisowni

Właściwość IsSpellCheckEnabled określa, czy sprawdzanie pisowni jest włączone. Domyślnie właściwość jest ustawiona na truewartość . Gdy użytkownik wprowadza tekst, wskazywane są błędy pisowni.

Jednak w przypadku niektórych scenariuszy wprowadzania tekstu, takich jak wprowadzenie nazwy użytkownika, sprawdzanie pisowni zapewnia negatywne środowisko i dlatego należy je wyłączyć, ustawiając IsSpellCheckEnabled właściwość na false:

<Editor ... IsSpellCheckEnabled="false" />

Uwaga

IsSpellCheckEnabled Gdy właściwość jest ustawiona na false, a niestandardowa klawiatura nie jest używana, natywny moduł sprawdzania pisowni zostanie wyłączony. Jeśli Keyboard jednak ustawiono ustawienie, które wyłącza sprawdzanie pisowni, takie jak Keyboard.Chat, IsSpellCheckEnabled właściwość jest ignorowana. W związku z tym nie można użyć właściwości w celu włączenia sprawdzania pisowni dla elementu Keyboard , który jawnie go wyłącza.

Włączanie i wyłączanie przewidywania tekstu

Właściwość IsTextPredictionEnabled określa, czy włączono przewidywanie tekstu i automatyczną korektę tekstu. Domyślnie właściwość jest ustawiona na truewartość . Gdy użytkownik wprowadza tekst, wyświetlane są przewidywania wyrazów.

Jednak w przypadku niektórych scenariuszy wprowadzania tekstu, takich jak wprowadzanie nazwy użytkownika, przewidywanie tekstu i automatyczna korekta tekstu zapewnia negatywne środowisko i powinno być wyłączone przez ustawienie IsTextPredictionEnabled właściwości na false:

<Editor ... IsTextPredictionEnabled="false" />

Uwaga

IsTextPredictionEnabled Gdy właściwość jest ustawiona na false, a niestandardowa klawiatura nie jest używana, przewidywanie tekstu i automatyczna korekta tekstu jest wyłączona. Jeśli Keyboard jednak ustawiono ustawienie, które wyłącza przewidywanie tekstu, IsTextPredictionEnabled właściwość jest ignorowana. W związku z tym nie można użyć właściwości do włączenia przewidywania tekstu dla elementu Keyboard , który jawnie go wyłącza.

Zapobieganie wpisowi tekstowemu

Użytkownikom można uniemożliwić modyfikowanie tekstu w obiekcie Editor przez ustawienie IsReadOnly właściwości , która ma domyślną wartość false, na truewartość :

<Editor Text="This is a read-only Editor"
        IsReadOnly="true" />

Uwaga

Właściwość IsReadonly nie zmienia wyglądu wizualizacji Editorobiektu , w przeciwieństwie do IsEnabled właściwości, która również zmienia wygląd wizualizacji Editor na szary.