PLANDĪŠANĀS PAKETE VEIDLAPU VEIDOŠANAI UZ KARTĒM

Plandīšanās pakete veidlapu veidošanai uz kartēm

Kartes iestatījumi Pārsteidzoša pakete, lai veidotu uz kartēm balstītas iestatījumu veidlapas. Tas ietver iepriekš izveidotu veidlapu lauku logrīku bibliotēku. Stils ir mazliet kā krustojums starp cupertino iestatījumu ekrānu un materiāla dizainu; Ideja ir tāda, ka tai vajadzētu būt izmantojamai un inteliģentai gan iOS, gan Android.

javascript backtick pret vienu pēdiņu

Kartes iestatījumi

Šī pakete sastāv no CardSettings izkārtojuma iesaiņojuma un virknes veidlapu lauku opciju, tostarp:

Teksta lauki
- CardSettingsText - Pamata teksta lauks
- Kartes iestatījumiPunkts - Daudzrindu teksta lauks ar skaitītāju
- CardSettingsEmail - Teksta lauks, kas iepriekš konfigurēts e-pasta ievadīšanai
- CardSettingsPassword - Teksta lauks, kas iepriekš konfigurēts parolēm
- Kartes iestatījumi Tālrunis - maskēts tālruņa ievades lauks (pašlaik ASV stilā)
Skaitliskie lauki
- CardSettingsDouble - Lauks dubultiem precizitātes skaitļiem
- CardSettingsInt - Lauks veseliem skaitļiem
- CardSettingsCurrency - Lauks valūtas ievadīšanai
- CardSettingsSwitch - lauks Būla stāvoklim
Pickers
- CardSettingsListPicker - Patvaļīgu iespēju atlasītāju saraksts
- CardSettingsNumberPicker - Izvēlieties skaitļu sarakstu noteiktā diapazonā
- CardSettingsColorPicker - RGB krāsu atlasītājs
- CardSettingsDatePicker - Materiāla dizaina datuma atlasītājs
- CardSettingsTimePicker - Materiāla dizaina laika atlasītājs
Atlase
- CardSettingsMultiselect - Izvēlieties no pieejamo opciju saraksta
Informatīvās sadaļas
- CardSettingsHeader - Vadīkla, lai ievietotu galveni starp veidlapas sadaļām
- Kartes iestatījumiInstrukcijas - Informatīvs lasāms teksts
Darbības
- Poga CardSettingsButton - Veidlapas darbības pogas

Visi lauki atbalsta | _+_ |, | _+_ |, | _+_ |, | _+_ | un | _+_ |.

Komplektā ietilpst arī šādas papildu preces:

CardSettingsField - Pamata izkārtojuma logrīks. To var izmantot, lai izveidotu pielāgotus laukus
Pārveidotāji - lietderības funkciju kopums, lai palīdzētu pārvērst datus laukos un no tiem

Vienkāršs piemērs

Visi šīs paketes lauki ir saderīgi ar standarta Flutter Form logrīku. Vienkārši iesaiņojiet CardSettings vadīklu veidlapā un izmantojiet to kā parasti, izmantojot veidlapas funkcionalitāti.

validate

Skatiet pilnu demonstrācijas piemēru šeit .

Tematika

Logrīki atbalsta materiāla dizaina tēmu. Šis piemērs parāda, kādas globālās motīvu vērtības jāiestata, lai noteiktu, kā parādās dažādi elementi.

onChange

Vai arī, ja vēlaties lietot citu tēmu | _+_ | tikai hierarhijā, varat to ietīt | _+_ | logrīku šādi:

onSaved

Globālie rekvizīti

| _+_ | logrīks ievieš dažus globālus iestatījumus, kurus var mantot visi pakārtotie lauki. Pašlaik tas atbalsta tikai etiķešu pielāgošanu.

Etiķetes

Jūs varat kontrolēt etiķešu atveidošanu, izmantojot četrus rekvizītus.

autovalidate

| _+_ | un | _+_ | rekvizīti ir pieejami arī katrā laukā, lai jūs varētu ignorēt globālo iestatījumu atsevišķiem laukiem.

visible

Dinamiskā redzamība

Katrs lauks ievieš | _+_ | īpašumu, ko varat izmantot, lai kontrolētu redzamību, pamatojoties uz citu lauku vērtību. Šajā piemērā slēdža lauks kontrolē teksta lauka redzamību:

 String title = 'Spheria'; String author = 'Cody Leet'; String url = 'http://www.codyleet.com/spheria' final GlobalKey _formKey = GlobalKey(); @override Widget build(BuildContext context) { body: Form( key: _formKey, child: CardSettings( children: [ CardSettingsHeader(label: 'Favorite Book'), CardSettingsText( label: 'Title', initialValue: title, validator: (value) , onSaved: (value) => title = value, ), CardSettingsText( label: 'URL', initialValue: url, validator: (value) { if (!value.startsWith('http:')) return 'Must be a valid website.'; }, onSaved: (value) => url = value, ), ], ), ), ); }

Maskēšana

| _+_ | logrīkam ir | _+_ | īpašums, kas liek ievadītajam tekstam atbilst noteiktam paraugam. Tas ir veidots uz flutter_masked_text
pakotne un maskas tiek formatētas ar šādām rakstzīmēm:

0: pieņem skaitļus
A: pieņemiet vēstules
@: pieņem ciparus un burtus
*: pieņem jebkuru rakstzīmi

Piemēram, tālruņa numurs būtu “(000) 000-0000”.

Piezīme: | _+_ | ir ērtības logrīks, kas ir iepriekš konfigurēts šī modeļa izmantošanai.

Uzmanību: | _+_ | ir kontrolieris, un tādējādi jūs nevarēsit vienlaikus izmantot ievades masku un pielāgotu kontrolieri. Nākotnē tas varētu tikt labots.

Orientācija

Šis komplekts ļauj mainīt orientāciju. Lai to konfigurētu, izveidojiet dažādus izkārtojumus atkarībā no orientācijas, ko nodrošina | _+_ |.

Iespējams, vēlēsities, lai katrā izkārtojumā būtu dažādi lauki vai cita lauku secība. Lai šādā gadījumā Flutter netiktu sajaukts izsekošanas stāvoklis, jums ir jānorāda unikāla stāvokļa atslēga katram atsevišķam laukam, izmantojot to pašu atslēgu katrā izkārtojumā.

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Card Settings Example', home: new HomePage(), theme: ThemeData( accentColor: Colors.indigo[400], // used for card headers cardColor: Colors.white, // used for field backgrounds backgroundColor: Colors.indigo[100], // color outside the card primaryColor: Colors.teal, // color of page header buttonColor: Colors.lightBlueAccent[100], // background color of buttons textTheme: TextTheme( button: TextStyle(color: Colors.deepPurple[900]), // style of button text subhead: TextStyle(color: Colors.deepOrange[900]), // style of input text ), ), ); } }

Vienā rindā ainavas orientācijā var būt vairāki lauki. Tas parasti prasa konteinera logrīku izmantošanu, lai nodrošinātu izkārtojumu rindas iekšpusē. Tā vietā varat izmantot | _+_ | palīga logrīku, lai to racionalizētu. Pēc noklusējuma tā bērniem būs vienāds attālums, taču jūs varat nodrošināt elastīgu vērtību masīvu, lai kontrolētu relatīvos izmērus.

CardSettings Theme

Pielāgotie lauki

| _+_ | ir visu pārējo lauku pamats, un to var izmantot, lai izveidotu unikālus laukus ārpus šīs bibliotēkas. Tās mērķis ir regulēt izkārtojumu ar konsekventiem rotājumiem. Labākais veids, kā izveidot pielāgotu lauku, ir mantot no | _+_ |, kas pārvaldīs jūsu lauka stāvokli. Tīrākais piemērs tam ir | _+_ | logrīks. Viss, kas jums jādara, ir jānodrošina pielāgotie logrīki | _+_ | īpašums.

Lejupielādes informācija:

Autors: codegrue

Barības suns: https://pub.dartlang.org/packages/card_settings

GitHub: https://github.com/codegrue/card_settings

#satricinājums #šautriņa #programmēšana

Plandīšanās pakete veidlapu veidošanai uz kartēm