close

UI formatavimas naudojant ThemeData ir Custom Styles in Flutter

Naudodami Flutter, galite formatuoti savo programos išvaizdą naudodami ThemeData ir tinkinti styles. yra klasė, kurioje yra ypatybių, skirtų visos programos ThemeData dominuojančiai spalvai styles, šriftams ir tt apibrėžti. padding Pasirinktinis stilius leidžia tinkinti styles pagal kiekvieną konkretų Widget. Čia pateikiamos išsamios instrukcijos, kaip naudoti ThemeData ir Styles tinkinti Flutter:

ThemeData

Flutter, yra ThemeData klasė, kurioje yra atributai, skirti apibrėžti pagrindinę spalvą, šriftų šeimą padding ir daugelį kitų visos programos stiliaus parinkčių. Naudodami ThemeData galite greitai pakeisti bendrą programos išvaizdą nekeisdami kiekvienos atskiros Widget.

Bendri atributai ThemeData:

  • primaryColor: pagrindinė pagrindinių programos elementų, pvz., programos juostos, mygtukų ir kt., spalva.
  • accentColor: NS antrinių elementų arba akcentų, pvz., FloatingActionButton, akcento spalva.
  • backgroundColor: visos programos fono spalva.
  • textTheme: apibrėžia pagrindinį tekstą styles skirtingiems programos teksto elementams, pvz., antraštėms, pagrindiniam tekstui ir kt.
  • textTheme.headline1: 1 antraštės lygio teksto stilius.
  • textTheme.headline2: 2 antraštės lygio teksto stilius.
  • textTheme.bodyText1: pagrindinio teksto teksto stilius.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

Pasirinktinis stilius

Pasirinktinis Styles leidžia tinkinti kiekvieno konkretaus stiliaus stilių Widget. Naudodami style valdiklių atributą, pvz., Tekstas, sudėtinis rodinys, iškeltas mygtukas ir kt., galite pakeisti šriftą, spalvą, teksto dydį padding ir įvairius kitus atributus.

Bendrieji TextStyle atributai(naudojami teksto valdikliui):

  • fontSize: šrifto dydis.
  • fontWeight: šrifto svoris.
  • color: teksto spalva.
  • fontStyle: šrifto stilius, pvz., paryškintas, kursyvas.
  • letterSpacing: tarpai tarp simbolių.
  • wordSpacing: tarpai tarp žodžių.
  • decoration: teksto apdaila, pvz., pabraukimas, perbraukimas.

Pavyzdys naudojant Custom Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

Naudojant Themes ir Styles su MediaQuery

Galite derinti Themes ir Styles su MediaQuery, kad pritaikytumėte vartotojo sąsają pagal ekrano dydį arba įrenginio skiriamąją gebą.

Pavyzdys:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

Išvada:

Flutter suteikia galingų įrankių, skirtų jūsų programos vartotojo sąsajai formatuoti. Naudodami ThemeData ir tinkindami Styles galite lengvai koreguoti vartotojo sąsajos elementus, pvz., spalvas, šriftus, teksto dydžius ir kt., kad sukurtumėte gražią ir patrauklią programos sąsają.