close

Comhéadain a fhormáidiú le ThemeData agus Saincheaptha Styles i Flutter

In Flutter, is féidir leat cuma agus mothú d'fheidhmchláir a fhormáidiú ThemeData agus an styles. ThemeData is aicme é ina bhfuil airíonna chun an dath ceannasach styles, clónna, padding, etc. a shainiú don fheidhmchlár iomlán. Ceadaíonn Stíl Chustaim duit a shaincheapadh styles do gach ceann ar leith Widget. Seo treoracha mionsonraithe maidir le conas é a úsáid ThemeData agus Saincheaptha Styles i Flutter:

ThemeData

Is aicme é In Flutter, ThemeData a bhfuil tréithe ann chun an bundath, an aicme chló, padding, agus go leor roghanna eile stílithe a shainiú don fheidhmchlár iomlán. Trí úsáid a bhaint as ThemeData, is féidir leat cuma foriomlán d'aip a athrú go tapa gan a bheith ort gach duine a mhodhnú Widget.

Tréithe coitianta ag ThemeData:

  • primaryColor: An dath bunscoile do phríomhghnéithe an app, mar shampla an barra app, cnaipí, etc.
  • accentColor: An dath accent le haghaidh eilimintí tánaisteacha nó buaicphointí san Chomhéadain, mar shampla FloatingActionButton.
  • backgroundColor: An dath cúlra don app iomlán.
  • textTheme: Sainmhíníonn sé an téacs príomhúil styles le haghaidh gnéithe éagsúla téacs san aip, mar cheannteidil, téacs coirp, etc.
  • textTheme.headline1: Stíl téacs do leibhéal ceannteidil 1.
  • textTheme.headline2: Stíl téacs do leibhéal ceannteidil 2.
  • textTheme.bodyText1: Stíl téacs don phríomhthéacs comhlacht.
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(),  
)

 

Stíl Chustaim

Saincheaptha Styles deis a thabhairt duit a shaincheapadh ar an stíl do gach ar leith Widget. Trí úsáid a bhaint as style tréith Giuirléidí cosúil le Téacs, Coimeádán, RaisedButton, etc., is féidir leat an cló, dath, méid an téacs, padding, agus tréithe éagsúla eile a athrú.

Tréithe coitianta TextStyle(a úsáidtear don Ghiuirléid Téacs):

  • fontSize: An clómhéid.
  • fontWeight: An meáchan cló.
  • color: Dath an téacs.
  • fontStyle: Stíl an chló, mar shampla trom, iodálach.
  • letterSpacing: An spásáil idir carachtair.
  • wordSpacing: An spás idir focail.
  • decoration: An maisiú téacs, mar shampla béim, stailc-trí.

Sampla ag úsáid Saincheaptha 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)),  
)

 

Ag baint úsáide as Themes agus Styles le MediaQuery

Is féidir leat a chur le chéile Themes agus Styles leis MediaQuery chun an Chomhéadain a choigeartú bunaithe ar mhéid an scáileáin nó taifeach an ghléis.

Sampla:

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

 

Conclúid:

Flutter soláthraíonn sé uirlisí cumhachtacha chun Chomhéadain d’fheidhmchláir a fhormáidiú. Trí úsáid a bhaint as ThemeData agus a shaincheapadh Styles, is féidir leat gnéithe Chomhéadain a choigeartú go héasca ar nós dathanna, clónna, méideanna téacs, etc., chun comhéadan álainn agus tarraingteach a chruthú do d'aip.