Flutter ramka uchun qo'llanma 1-bob. Flutterga kirish Flutter nima. O'rnatish

3-bob. O'rnatilgan vidjetlar va o'z vidjetlaringizni yaratish

Matn vidjeti matn qatorini ko'rsatish uchun mo'ljallangan. Vidjet yaratish va uni o'rnatish uchun siz quyidagi konstruktordan foydalanishingiz mumkin:

1 2 3

Text(String data, {Key key, TextStyle style, StrutStyle strutStyle, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel, TextWidthBasis textWidthBasis, TextHeightBehavior textHeightBehavior})

Vidjetning asosiy parametrlari:

matn: vidjetning haqiqiy matni

uslub: matn uslubini, xususan, matn rangini, fonni, shrift oilasini, shrift hajmini va boshqalarni belgilaydi. TextStyle sinfining ob'ektini ifodalaydi

strutStyle: asosiy chiziqqa nisbatan minimal chiziq balandligini o'rnatadi. StrutStyle sinfini ifodalaydi

textAlign: Gorizontal tekislashni o'rnatadi. TextAlign ro'yxatini ifodalaydi va quyidagi qiymatlarga ega bo'lishi mumkin:

TextAlign.center: markazga tekislash

TextAlign.left: konteynerni chapga tekislash

TextAlign.right: konteynerni o'ngga tekislash

TextAlign.justify: matnni butun chiziq uzunligiga cho'zish

TextAlign.end: satr oxiridagi tekislash. Chapdan o'ngga matn uchun bu konteynerning o'ng qirrasi va o'ngdan chapga matn uchun bu konteynerning chap chetidir.

TextAlign.start: satr boshida tekislash. Chapdan o'ngga matn uchun bu konteynerning chap qirrasi va o'ngdan chapga matn uchun bu konteynerning o'ng tomonidir.

textDirection: Matn yo'nalishini belgilaydi. TextDirection ro'yxatini ifodalaydi. Asosiy qiymatlar: TextDirection.ltr (matn chapdan o'ngga) va TextDirection.rtl (o'ngdan chapga)

locale: mahalliy yoki, taxminan, tilni o'rnatadi. Locale sinfining obyektini ifodalaydi

softWrap: test belgilangan uzunlikka yetganda keyingi qatorga o'tish-o'tmasligini aniqlaydi.

overflow: Matn mavjud uzunlikdan oshib ketganda uning qanday qisqartirilishini aniqlaydi. TextOverflow ro'yxatini ifodalaydi

textScaleFactor: Har bir mantiqiy piksel uchun shifrlangan piksellar sonini aniqlaydi.

maxLines: matn satrlarining maksimal sonini belgilaydi

textWidthBasis: matn kengligi qanday o'lchanishini belgilaydi. TextWidthBasis ro'yxatini ifodalaydi.

textHeightBehavior: TextStyle.height qiymati matnning birinchi va oxirgi satrlariga qanday qo'llanilishini aniqlaydi. TextHeightBehavior sinfini ifodalaydi.

String turidagi birinchi parametr talab qilinadi va ko'rsatiladigan haqiqiy xabarni ifodalaydi. Qolgan parametrlar ixtiyoriy.

Keling, bir qator xususiyatlardan foydalanamiz va oddiy matnni aniqlaymiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import 'package:flutter/material.dart'; void main() { runApp(Container( padding: EdgeInsets.only(top:25, left:10, right:10), color: Colors.white, child: Text("Hello Flutter from Metanit.com", textDirection: TextDirection.ltr, // текст слева направо textAlign: TextAlign.center, // выравнивание по центру style: TextStyle(color: Colors.green, // зеленый цвет текста fontSize: 26, // высота шрифта 26 backgroundColor: Colors.black87 // черный цвет фона текста ) ) ) ); }

Matn uslubi

Matn uslubi TextStyle sinfini ifodalovchi style parametri bilan tavsiflanadi. Ushbu sinf matnni ko'rsatish uchun juda ko'p sozlamalarni o'rnatish imkonini beradi. U quyidagi konstruktorga ega:

1 2 3 4 5

TextStyle({bool inherit: true, Color color, Color backgroundColor, double fontSize, FontWeight fontWeight, FontStyle fontStyle, double letterSpacing, double wordSpacing, TextBaseline textBaseline, double height, Locale locale, Paint foreground, Paint background, List shadows, List fontFeatures, TextDecoration decoration, Color decorationColor, TextDecorationStyle decorationStyle, double decorationThickness, String debugLabel, String fontFamily, List fontFamilyFallback, String package})

Keling, konstruktorning ba'zi parametrlarini qisqacha ko'rib chiqaylik:

inherit: berilgan uslub asosiy vidjetning uslub xususiyatlarini meros qilib olish-olmasligini bildiradi

rang: matnning rangi

backgroundColor: matnning fon rangi

fontSize: shrift hajmi

fontWeight: shrift vazni. FontWeight sinfini ifodalaydi va uning doimiylaridan birini qiymat sifatida qabul qilishi mumkin: FontWeight.w100, FontWeight.w200, FontWeight.w300, FontWeight.w400 (FontWeight.bold ga ekvivalent), FontWeight.w500, FontWeight.w600, FontWeight e FontWeight. .bold ( .bold), FontWeight.w800 va FontWeight.w900. Konstantadagi raqamli qiymat qanchalik katta bo'lsa, shrift mos ravishda qalinroq bo'ladi.

fontStyle: shrift uslubini o'rnatadi. FontStyle ro'yxatini ifodalaydi va quyidagi qiymatlarni qabul qilishi mumkin: FontStyle.normal va FontStyle.italic (italik shrift)

letterSpacing: so'zlar orasidagi masofani o'rnatadi, salbiy qiymat so'zlarni bir-biriga yaqinroq bo'lishiga imkon beradi

wordSpacing: belgilar orasidagi masofani o'rnatadi, salbiy qiymat belgilarning bir-biriga yaqinroq bo'lishiga imkon beradi

textBaseline: matnning asosiy chizig'i

balandlik: matn elementining balandligi koeffitsienti. Haqiqiy balandlikni aniqlash uchun bu omil shrift fontSize balandligiga ko'paytiriladi.

locale: matnning mahalliy yoki til madaniyatini o'rnatadi

old fon: matnni bo'yash uchun rasm yoki Paint ob'ektini belgilaydi

fon: vidjet foni sifatida rasm yoki Paint obyektini o‘rnatadi

soyalar: shrift uchun soyalarni Soya ob'ektlari to'plami sifatida o'rnatadi

bezak: matnni bezash (chizilgan, tagiga chizilgan yoki chizilgan). Qiymat sifatida TextDecoration sinfidan quyidagi konstantalarni olishi mumkin:

TextDecoration.lineThrough: chizilgan matn

TextDecoration.overline: matn ustidagi tagiga chizish

TextDecoration.underline: matn ostidagi tagiga chizish

bezatish rangi: bezak rangi

bezatish uslubi: bezatish uslubi. TextDecorationStyle ro'yxatini ifodalaydi va quyidagi qiymatlarga ega bo'lishi mumkin:

TextDecorationStyle.dashed: nuqta chiziq

TextDecorationStyle.dotted: nuqta

TextDecorationStyle.double: ikki marta tagiga chizish

TextDecorationStyle.solid: muntazam qator

TextDecorationStyle.wavy: to'lqinli chiziq

bezak Qalinligi: bezaklarning qalinligi

fontFamily: foydalaniladigan shrift nomi. Odatiy bo'lib, Android uchun faqat "Roboto" shrifti ishlatiladi.

Dekoratsiyadan foydalanishni ko'rib chiqing:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

import 'package:flutter/material.dart'; void main() { runApp(Container( padding: EdgeInsets.only(top:25, left:10, right:10), color: Colors.teal, child: Column(children: [ Text("Hello Flutter from Metanit.com", textDirection: TextDirection.ltr, style: TextStyle( fontSize: 26, decoration: TextDecoration.lineThrough, decorationStyle: TextDecorationStyle.double )), Text("Hello Flutter from Metanit.com", textDirection: TextDirection.ltr, style: TextStyle( fontSize: 26, decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.wavy, decorationColor: Colors.blue, decorationThickness: 2 )), Text("Hello Flutter from Metanit.com", textDirection: TextDirection.ltr, style: TextStyle( fontSize: 26, decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dotted, decorationColor: Colors.red, decorationThickness: 3 )) ]) ) ); }

Ko'p qatorli matn, matnni o'rash va kesish

Vidjet matni u uchun ajratilgan maydonga sig'masligi mumkin. Va bu holatda, turli xil strategiyalar mavjud. Masalan, overflow parametri matn qatorining oxiri formatini belgilash imkonini beradi. U TextOverflow ro'yxatini ifodalaydi va quyidagi qiymatlarni olishi mumkin:

TextOverflow.clip: matn konteyner uzunligiga mos ravishda kesiladi

TextOverflow.ellipsis: matnning oxiriga ellipsis qo'shiladi

TextOverflow.fade: matn oxiri rangi o‘chib ketadi

TextOverflow.visible: matn konteyner tashqarisida ko'rinadi

Masalan, uzun matndan keyin ellipsisdan foydalanish:

1 2 3 4 5 6 7 8 9 10 11 12 13

import 'package:flutter/material.dart'; void main() { runApp(Container( padding: EdgeInsets.only(top:25, left:10, right:10), color: Colors.white, child: Text("Все мы сейчас желаем кушать, потому что утомились и", textDirection: TextDirection.ltr, style: TextStyle(color: Colors.black87, fontSize: 20), overflow: TextOverflow.ellipsis) ) ); }

SoftWrap parametri matnni keyingi qatorga oʻtkazish imkonini beradi (agar rost boʻlsa). Odatiy bo'lib, u noto'g'ri, ya'ni matn o'ralgan emas.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import 'package:flutter/material.dart'; void main() { runApp(Container( padding: EdgeInsets.only(top:25, left:10, right:10), color: Colors.white, child: Text("Все мы сейчас желаем кушать, потому что утомились и уже четвертый час, но это, душа моя Григорий Саввич, " "не настоящий аппетит. Настоящий, волчий аппетит, когда, кажется, отца родного съел бы, бывает только после физических движений", textDirection: TextDirection.ltr, style: TextStyle(color: Colors.black87, fontSize: 20), softWrap: true ) ) ); }

Yana bir strategiya maxLines parametri yordamida konstruktordagi qatorlar sonini aniqlashdir. Sinov avtomatik ravishda keyingi qatorga o'tadi (barcha maksimal qatorlar sonini to'ldirguncha).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import 'package:flutter/material.dart'; void main() { runApp(Container( padding: EdgeInsets.only(top:25, left:10, right:10), color: Colors.white, child: Text("Все мы сейчас желаем кушать, потому что утомились и уже четвертый час, но это, душа моя Григорий Саввич, " "не настоящий аппетит. Настоящий, волчий аппетит, когда, кажется, отца родного съел бы, бывает только после физических движений", textDirection: TextDirection.ltr, style: TextStyle(color: Colors.black87, fontSize: 20), maxLines: 4 ) ) ); }