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     )     )   ); }