close

A felhasználói felület formázása a ThemeData és az Egyéni Styles be Flutter

Az alkalmazásban Flutter formázhatja az alkalmazás megjelenését és működését ThemeData a styles. ThemeData egy olyan osztály, amely tulajdonságokat tartalmaz, amelyek meghatározzák a domináns színt styles, betűtípusokat padding stb. a teljes alkalmazás számára. Az Egyéni stílus lehetővé teszi a testreszabást styles minden egyes specifikus stílushoz Widget. Íme részletes utasítások a használathoz ThemeData és az egyéni Styles használathoz Flutter:

ThemeData

A Flutter, egy olyan osztály, amely attribútumokat tartalmaz az elsődleges szín, a betűcsalád és sok más stílusbeállítás ThemeData meghatározásához a teljes alkalmazás számára. padding A használatával ThemeData gyorsan megváltoztathatja az alkalmazás általános megjelenését anélkül, hogy minden egyes módosítást kellene végrehajtania Widget.

Gyakori attribútumai ThemeData:

  • primaryColor: Az alkalmazás fő elemeinek elsődleges színe, például az alkalmazássáv, a gombok stb.
  • accentColor: A felhasználói felület másodlagos elemeinek vagy kiemelésének kiemelő színe, például a FloatingActionButton.
  • backgroundColor: A teljes alkalmazás háttérszíne.
  • textTheme styles: Meghatározza az alkalmazás különböző szövegelemeinek elsődleges szövegét, például címsorokat, törzsszöveget stb.
  • textTheme.headline1: Szövegstílus az 1. címsorszinthez.
  • textTheme.headline2: Szövegstílus a 2. címsorszinthez.
  • textTheme.bodyText1: A fő törzsszöveg szövegstílusa.
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(),  
)

 

Egyedi stílus

Egyéni Styles lehetővé teszi a stílus testreszabását az egyes konkrétumok számára Widget. Az olyan widgetek attribútumának használatával, style mint a Szöveg, Tároló, RaisedButton stb., módosíthatja a betűtípust, a színt, a szöveg méretét, padding és számos egyéb attribútumot.

A TextStyle általános attribútumai(Szöveg widgethez használatos):

  • fontSize: A betűméret.
  • fontWeight: A betűtípus súlya.
  • color: A szöveg színe.
  • fontStyle: A betűtípus stílusa, például félkövér, dőlt.
  • letterSpacing: A karakterek közötti térköz.
  • wordSpacing: A szavak közötti térköz.
  • decoration: A szöveg díszítése, például aláhúzás, áthúzás.

Példa az Egyéni használatára 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)),  
)

 

Használata Themes és Styles együtt MediaQuery

Themes A és Styles a gombbal kombinálhatja MediaQuery a felhasználói felületet a képernyő mérete vagy az eszköz felbontása alapján.

Példa:

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

 

Következtetés:

Flutter hatékony eszközöket biztosít az alkalmazás felhasználói felületének formázásához. A használatával ThemeData és testreszabásával Styles könnyedén beállíthatja a felhasználói felület elemeit, például a színeket, a betűtípusokat, a szövegméreteket stb., hogy gyönyörű és vonzó felületet hozzon létre az alkalmazás számára.