1 00:00:02,460 --> 00:00:06,390 Offensichtlich ist dieser Bildschirm momentan nicht so nützlich, und deshalb 2 00:00:06,390 --> 00:00:13,500 gehe ich jetzt zu dem Text, den ich als Dummy verwendet habe, und ersetze ihn durch beispielsweise ein neues 3 00:00:13,500 --> 00:00:21,480 Spiel, so etwas, und darunter möchte ich einen haben Eingabebereich mit einem leichten Schlagschatten, daher kennen Sie diesen typischen Kartenlook möglicherweise 4 00:00:21,540 --> 00:00:27,420 von einigen Apps und Websites, auf denen sich eine Box mit einem leichten Schlagschatten befindet, 5 00:00:27,420 --> 00:00:29,220 möglicherweise einige abgerundete Ecken. 6 00:00:29,400 --> 00:00:36,570 Ich möchte das hier neu erstellen, also werde ich hier eine Ansicht hinzufügen, eine Ansicht, da dies wiederum ein sehr flexibles Element ist. 7 00:00:36,600 --> 00:00:42,120 Wir können dort viele Stile anwenden, wir können dort unseren Schatten und unsere abgerundeten Ecken hinzufügen und dann 8 00:00:42,150 --> 00:00:43,460 unsere halten Inhalt 9 00:00:43,470 --> 00:00:49,080 in dieser Ansicht, das ist also großartig, um den Container allgemein zu gestalten, und jetzt möchte ich innerhalb 10 00:00:49,080 --> 00:00:56,910 dieser Ansicht einen Text haben, in dem wir sagen, wählen Sie beispielsweise eine Zahl aus, und in dem wir dann auch ein Textfeld haben möchten, in 11 00:00:57,150 --> 00:00:58,580 dem Benutzer kann etwas eingeben. 12 00:00:58,590 --> 00:00:59,310 Dort füge 13 00:00:59,430 --> 00:01:06,300 ich eine Texteingabekomponente hinzu, bei der es sich um die integrierte Komponente handelt, bei der Benutzer über die Tastatur einen Wert 14 00:01:06,300 --> 00:01:11,970 eingeben können. Hier sollten sie eine Zahl eingeben. Wir werden dies konfigurieren und in 15 00:01:11,970 --> 00:01:17,820 einer Sekunde formatieren. Im Moment werde ich es einfach so einfügen und darunter möchte ich 16 00:01:17,850 --> 00:01:18,810 zwei Schaltflächen 17 00:01:18,810 --> 00:01:25,190 nebeneinander haben, und das ist wichtig, nebeneinander, nicht untereinander andere, mit denen wir den Eingang zurücksetzen 18 00:01:25,190 --> 00:01:32,510 und einen neuen auswählen oder den ausgewählten bestätigen können. Wir brauchen hier also eine Ansicht, da wir so Elemente nebeneinander 19 00:01:32,660 --> 00:01:37,520 positionieren können, während diese Elemente übereinander positioniert sind. Wenn ich hier nur zwei Schaltflächen hinzufügen würde, 20 00:01:37,560 --> 00:01:42,650 müsste ich die Flexrichtung dieser Ansichten ändern, um sie als Nächstes zu erhalten zueinander, aber dann würden 21 00:01:42,680 --> 00:01:45,420 auch der Text und die Texteingabe nebeneinander sitzen. 22 00:01:45,500 --> 00:01:51,950 Jetzt füge ich hier eine Ansicht hinzu, sodass in dieser Ansicht die umgebende Ansicht, diese, diese und diese 23 00:01:52,250 --> 00:01:54,010 Ansichtskomponente übereinander liegen. Auf 24 00:01:54,020 --> 00:02:00,590 der vertikalen Achse, aber innerhalb dieser Ansicht, kann ich jetzt auch sicherstellen, dass Die Gegenstände dort sitzen dann nebeneinander, 25 00:02:00,590 --> 00:02:05,270 also in der horizontalen Achse und das ist es, was ich hier will. 26 00:02:05,450 --> 00:02:11,480 Daher importiere ich die integrierte Schaltfläche, die eine der Ansichtskomponenten ist, die sich automatisch an die zugrunde liegende 27 00:02:11,510 --> 00:02:17,540 Plattform anpasst. Später in einem separaten Modul erfahren Sie, wie Sie manuell herausfinden können, auf welcher Plattform 28 00:02:17,630 --> 00:02:21,990 Sie die Anpassung vornehmen möchten das Aussehen und Verhalten Ihrer App dazu. 29 00:02:22,220 --> 00:02:29,450 Hier gehen wir mit der eingebauten Schaltfläche und geben der ersten einen Titel zum Zurücksetzen und der zweiten, der zweiten Schaltfläche 30 00:02:29,510 --> 00:02:32,450 hier einen Titel zum Bestätigen und dann wird onPress 31 00:02:32,450 --> 00:02:39,740 im Moment nichts tun, das ist also nur eine leere Funktion, füge sie einfach hinzu, damit wir die Requisite bereits dort 32 00:02:39,740 --> 00:02:42,000 haben, wir werden später Logik hinzufügen 33 00:02:42,050 --> 00:02:43,710 und für den Moment 34 00:02:43,850 --> 00:02:46,140 haben wir nur die Schaltflächen hier. 35 00:02:46,250 --> 00:02:51,330 Jetzt fehlt das Styling, aber wie gesagt, der Knopf sollte nebeneinander sitzen. 36 00:02:51,410 --> 00:02:57,170 Daher gebe ich dieser Ansicht hier, die die Schaltflächen enthält, einen Stil, der auf 37 00:02:57,170 --> 00:02:59,060 das Stilobjekt zeigt, und 38 00:02:59,060 --> 00:03:02,370 dort, sagen wir einen Schaltflächencontainer, liegt dieser Name 39 00:03:02,520 --> 00:03:10,930 wie immer ganz bei Ihnen, und ich möchte dieser Ansicht, die meine Eingaben enthält, auch a geben Stil hier, unter Bezugnahme auf 40 00:03:10,960 --> 00:03:14,930 das Stilobjekt und ich werde den sagen wir Eingabecontainer verwenden, 41 00:03:15,040 --> 00:03:20,850 dieser Name liegt natürlich auch bei Ihnen und hier möchte ich dies wie einen speziellen 42 00:03:20,950 --> 00:03:27,090 Titel stylen, vielleicht mit einer größeren Schriftgröße, also Hier werde ich einen Titelstil zuweisen, sagen wir. 43 00:03:27,300 --> 00:03:36,900 Jetzt können wir in unserem Stylesheet nach unten gehen und den Titel hinzufügen, den Eingabecontainer hinzufügen und auch den Schaltflächencontainer hinzufügen. Jetzt 44 00:03:37,080 --> 00:03:43,330 können wir dort einige Stile hinzufügen. Nun zum Titel, ich möchte wieder 45 00:03:43,330 --> 00:03:47,330 die Schriftgröße festlegen, also werde ich die Schriftgröße 46 00:03:47,410 --> 00:03:58,750 wie folgt einstellen, auf 20 einstellen und vielleicht auch einen gewissen Abstand auf der vertikalen Achse mit einem vertikalen Rand von beispielsweise 10, 47 00:03:58,750 --> 00:04:09,750 10 hinzufügen Dies und immer im Auge behalten, ersetzt der vertikale Rand im Grunde den unteren und unteren Rand und jetzt den 48 00:04:09,990 --> 00:04:17,050 Schaltflächencontainer. Ich werde gleich zum Eingabecontainer zurückkehren. Der Schaltflächencontainer erhält eine flexible Zeilenrichtung. Die 49 00:04:17,060 --> 00:04:19,780 Standardeinstellung ist Spalte, aber jetzt möchte 50 00:04:19,790 --> 00:04:23,790 ich, dass Elemente nebeneinander sitzen, also müssen wir 51 00:04:23,790 --> 00:04:25,870 hier Zeile verwenden. 52 00:04:25,870 --> 00:04:31,420 Ich möchte hier eine Breite festlegen, denn wenn wir keine Breite für den Schaltflächencontainer festlegen, ist diese genauso 53 00:04:31,450 --> 00:04:34,960 breit wie die beiden Schaltflächen zusammen. Stattdessen möchte ich die Breite 54 00:04:34,960 --> 00:04:41,050 der übergeordneten Schaltfläche verwenden, also von dieser Ansicht hier und positionieren Sie dann die Schaltflächen in dieser Ansicht, sodass ich 55 00:04:41,050 --> 00:04:41,880 das Gegenteil 56 00:04:41,890 --> 00:04:47,140 tun möchte. Stylen Sie die Ansicht nicht gemäß den Schaltflächen, sondern positionieren Sie die Schaltflächen gemäß 57 00:04:47,140 --> 00:04:47,970 der Ansicht. 58 00:04:48,160 --> 00:04:55,150 Daher gebe ich dem Schaltflächencontainer diese Ansicht und die explizite Breite hier und jetzt. Um die Schaltflächen dort zu positionieren, können 59 00:04:55,150 --> 00:04:55,590 wir 60 00:04:55,690 --> 00:05:01,630 sie mit defineContent entlang der Hauptachse positionieren, die für die Flex-Richtungsreihe von links nach rechts ist, und 61 00:05:01,630 --> 00:05:07,930 dort werde ich den Platz auswählen dazwischen, so dass die Schaltflächen am linken und rechten Rand dieser Reihe 62 00:05:07,930 --> 00:05:15,000 sitzen und den gesamten verfügbaren freien Platz zwischen ihnen verteilen. Fügen Sie hier auch ein wenig horizontale Polsterung hinzu, damit 63 00:05:15,000 --> 00:05:21,660 wir innerhalb unserer Ansicht einen gewissen Abstand nach links und rechts haben, vielleicht 15, damit die Tasten nicht direkt 64 00:05:21,660 --> 00:05:24,920 an den Rändern links und rechts sitzen, aber es 65 00:05:25,020 --> 00:05:29,420 gibt einige Abstand links und rechts. Okay, wenn wir 66 00:05:29,560 --> 00:05:35,240 das speichern, sehen wir das, was ich nicht über dich 67 00:05:35,660 --> 00:05:39,860 weiß, aber was nicht so toll aussieht, oder? 68 00:05:39,860 --> 00:05:45,650 Das Problem ist nun, dass der Eingabecontainer noch keine Stile hat. Der Eingabecontainer enthält jedoch alle Eingaben, weshalb 69 00:05:45,650 --> 00:05:48,340 die Stile dort etwas abweichen. 70 00:05:49,040 --> 00:05:56,000 Wir sollten dem Eingabecontainer also ein Styling geben und dort möchte ich eine Breite hinzufügen, und Sie können 71 00:05:56,090 --> 00:06:02,690 jetzt eine fest codierte Breite von beispielsweise 300 Pixel oder eine Breite und einen Prozentsatz verwenden. 72 00:06:02,990 --> 00:06:11,570 Jetzt füge ich hier eine Breite von 300 hinzu, füge aber auch eine maximale Breite von 80% hinzu, so dass wir eine Breite von 300 Pixel haben, aber wenn das 73 00:06:11,570 --> 00:06:17,120 Gerät zu klein wäre, ist das ein bisschen Reaktionsfähigkeit, die ich hier bereits hinzufüge, wenn die Gerät wäre zu 74 00:06:17,120 --> 00:06:23,300 klein, wir stellen sicher, dass unsere Breite 80% nicht überschreitet. Und dann möchte ich die Elemente in der 75 00:06:23,300 --> 00:06:25,840 Mitte ausrichten. Beachten Sie, dass 76 00:06:25,850 --> 00:06:29,600 der Eingabecontainer eine Ansicht ist. Daher wird die Flexbox verwendet. 77 00:06:29,600 --> 00:06:35,420 Die Standardspalte für die Flexrichtungsspalte wird verwendet. Daher positionieren wir mit der Elementmitte ausrichten Elemente 78 00:06:35,630 --> 00:06:39,240 in der Mitte auf der Querachse von links nach 79 00:06:39,260 --> 00:06:44,500 rechts, sodass wir die Elemente horizontal zentrieren. Jetzt damit, jetzt sieht das viel besser aus, wir 80 00:06:44,500 --> 00:06:46,140 können die Eingabe nicht wirklich 81 00:06:46,180 --> 00:06:48,780 sehen, aber das ist das alte Ding, oder? 82 00:06:48,970 --> 00:06:53,710 Wir müssen es stylen, damit wir es wirklich sehen können. Wir sehen jedoch die Schaltflächen und 83 00:06:53,710 --> 00:06:57,710 können sehen, dass unser allgemeines Layout und Styling eine gewisse Form annimmt. 84 00:06:58,090 --> 00:07:01,440 Trotzdem bin ich noch nicht 100% glücklich über das Aussehen.