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

Vidjetlar bilan tanishtirish

Flutter ilovasining markaziy qismi vidjetlardir. Aslida, bu grafik interfeysni tashkil etuvchi vizual komponentlardir.

Keling, eng oddiy misolni ko'rib chiqaylik. Avvalo, keling, yangi Flutter loyihasini yarataylik.

Odatiy bo'lib, dastur kodi lib / main.dart faylida joylashgan. Keling, ushbu faylni ochamiz va uning mazmunini o'zgartiramiz:

1 2 3 4 5 6 7 8 9 10 11

import 'package:flutter/material.dart';   void main() {   runApp(     Text(         'Привет Flutter!',         textDirection: TextDirection.ltr,         textAlign: TextAlign.center,     ),   ); }

Flutter ilovasining bajarilishi asosiy funksiyadan boshlanadi. GUI yaratish uchun bu funksiya boshqa o'rnatilgan funksiyani chaqiradi - runApp (Vidjet ilovasi). U ekranga ma'lum bir vidjetni biriktiradi. Ya'ni, aslida, dastur qurilma ekranida ishga tushirilganda biz buni ko'ramiz. Biriktirilgan vidjet parametr sifatida runApp () funksiyasiga uzatiladi.

Barcha vidjetlar Widget sinfidan meros bo'lib qoladi. Bunday holda, Matn vidjeti matnni ekranda ko'rsatish uchun mo'ljallangan runApp funksiyasiga o'tkaziladi. Uning uchta xususiyati ushbu sinf konstruktori orqali o'rnatiladi. Avvalo, “Hello Flutter!” qatori uzatiladigan ekran matni. Shuningdek, matn yo‘nalishini o‘rnatuvchi va TextDirection.ltr qiymatini (matnning chapdan o‘ngga yo‘nalishini) qabul qiluvchi textDirection xossasi va matnning gorizontal tekislanishini o‘rnatuvchi va matnni qabul qiluvchi textAlign xossasi o‘rnatiladi. qiymati TextAlign.center (ya'ni matn markazlashtirilgan).

Kodni o'zgartirgandan so'ng, Android Studio sinov fayllari jildini yaroqsiz deb belgilashi mumkin, chunki biz test faylini o'zgartirmasdan dastur kodini o'zgartirdik:

Ammo ayni paytda siz ushbu daqiqani e'tiborsiz qoldirishingiz mumkin. Bundan tashqari, widget_test.dart fayli hozircha butunlay o'chirilishi mumkin.

Shunday qilib, biz eng minimal Flutter ilovasini aniqladik. Natijada, dasturni ishga tushirganda, biz qurilmaning yuqori markazida qidiruv matnini ko'ramiz:

Ba'zi vidjetlar boshqalarni o'z ichiga olishi mumkin, shuning uchun daraxt shaklida ierarxik tizimni tashkil qiladi. Masalan, matnni vertikal ravishda ekranning o'rtasiga joylashtiramiz. Buning uchun Align vidjetidan foydalanamiz:

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

import 'package:flutter/material.dart';   void main() {   runApp(     Align(       alignment: Alignment.center,       child:Text(           'Привет Flutter!',           textDirection: TextDirection.ltr,       ),     ),   ); }

Endi runApp funksiyasiga uzatiladigan ildiz vidjeti Align vidjetidir. Alignment xususiyati ichki joylashtirilgan elementlarning hizalanishini belgilaydi. Bunday holda, Alignment.center qiymati tekislash gorizontal va vertikal ravishda markazlashtirilishini bildiradi.
Boshqa xususiyat, bola, ichki o'rnatilgan vidjetni ifodalaydi - bu holda, avval ishlatilgan Matn vidjeti.
Ilovani ishga tushirganimizda, biz Mos ravishda Align vidjetini ko'ramiz, uning ichida Matn vidjeti joylashgan: