Asettelun peruswidgetit
Ottakaa haltuun olennaiset asetteluwidgetit, kuten Row, Column, Container ja Stack, rakenteisten ja responsiivisten käyttöliittymien luomista varten.
Asettelun peruswidgetit on ilmainen Mobiilikehitys Flutterilla-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Mobiilikehitys Flutterilla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.
Miksi asettelulla on väliä
Flutterissa kaikki on widget! Monimutkaisten ja näyttävien käyttöliittymien rakentamiseksi widgetit on järjestettävä näytölle.
Asetteluwidgetit ovat erityisiä widgetejä, joiden avulla voit järjestää muita widgetejä sekä määrittää niiden koon, sijainnin ja keskinäisen toiminnan.
Tutustu Container-widgetiin
Container-widget on yksi monipuolisimmista asetteluwidgeteistä. Ajattele sitä muokattavana laatikkona, joka voi sisältää yhden lapsiwidgetin.
Voit käyttää sitä seuraaviin tarkoituksiin:
- Lisäämään sisäisiä tai ulkoisia tyhjiä tiloja
- Asettamaan taustavärejä tai koristeita
- Määrittämään tietyn leveyden ja korkeuden
- Muuntamaan sen sijaintia tai kiertoa
Yksinkertainen värillinen laatikko
Luodaan perusmuotoinen Container, jolla on lapsena Text-widget. Huomaa, miten asetamme sen color- ja padding-ominaisuudet.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Container Demo')),
body: Center(
child: Container(
padding: const EdgeInsets.all(20.0),
color: Colors.blueAccent,
child: const Text(
'Hello from Container!',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
),
);
}
}Vaakasuunnassa Row-widgetillä
Kun useita widgettejä on järjestettävä vierekkäin vaakasuunnassa, Row-widget on oikea valinta. Se vastaanottaa widgettien luettelon children-ominaisuutena.
Row yrittää automaattisesti sovittaa lapsensa vaaka-akselille, ja voit hallita niiden tasausta rivillä.
Painikkeet rivissä
Näin voit sijoittaa kolme painiketta vierekkäin Row-widgetin avulla. Lisätään niiden väliin hieman tyhjää tilaa.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Row Demo')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
],
),
),
),
);
}
}Pystysuunnassa Column-widgetillä
Aivan kuten Row järjestää widgetit vaakasuunnassa, Column-widget järjestää ne pystysuunnassa allekkain.
Se vastaanottaa myös children-luettelon ja antaa sinun hallita niiden tasausta pystysuunnassa.
Tekstikentät allekkain
Luodaan yksinkertainen kirjautumislomakkeen kaltainen lomake, jossa Column pinoaa kaksi TextField-widgetiä ja painikkeen pystysuunnassa.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Column Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(labelText: 'Username'),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
),
ElevatedButton(onPressed: () {}, child: const Text('Login')),
],
),
),
),
);
}
}Lasten tasaaminen
Sekä Row että Column käyttävät tasaukseen kahta tärkeää ominaisuutta:
mainAxisAlignment: Miten lapset sijoitetaan pääakselilla (Row-widgetillä vaakasuunnassa jaColumn-widgetillä pystysuunnassa). Esimerkkejä:start,center,end,spaceAround.crossAxisAlignment: Miten lapset sijoitetaan kohtisuoralla akselilla (Row-widgetillä pystysuunnassa jaColumn-widgetillä vaakasuunnassa). Esimerkkejä:start,center,end,stretch.
Näiden avulla voit hallita asetteluasi tarkasti!
Päällekkäisyys Stack-widgetillä
Joskus widgetit on sijoitettava toistensa päälle, esimerkiksi teksti kuvan päälle. Tällöin Stack-widget on hyödyllinen.
Stack mahdollistaa useiden lapsiwidgetien asettamisen kerroksiksi. Voit hallita niiden tarkkaa sijaintia pinossa Positioned-widgetin avulla.
Kuva ja tekstikerros
Sijoitetaan teksti suoraan kuvan päälle Stack-widgetin avulla. Käytämme Positioned-widgetiä tekstin tarkkaan sijoittamiseen.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Stack Demo')),
body: Center(
child: SizedBox(
width: 300,
height: 200,
child: Stack(
children: <Widget>[
Image.network(
'https://picsum.photos/300/200',
fit: BoxFit.cover,
),
const Positioned(
bottom: 10,
left: 10,
child: Text(
'Beautiful Scenery',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
shadows: [
Shadow(blurRadius: 5, color: Colors.black)
],
),
),
),
],
),
),
),
),
);
}
}Asetteluhaaste
Mitkä seuraavista widgeteistä on tarkoitettu ensisijaisesti useiden lapsiwidgetien järjestämiseen yhteen suuntaan (vaaka- tai pystysuunnassa)?
Asettelut hallussa!
Hienoa työtä! Nyt hallitset Flutterin keskeiset asetteluwidgetit:
Container: Monipuolinen laatikko yksittäisille lapsille, joka tarjoaa hallinnan sisätyhjään tilaan, ulkomarginaaliin, väriin ja kokoon.Row: Järjestää useita lapsia vaakasuunnassa.Column: Järjestää useita lapsia pystysuunnassa.Stack: Asettaa lapset kerroksittain toistensa päälle, usein yhdessäPositioned-widgetin kanssa.
Näiden ymmärtäminen on tärkeää minkä tahansa Flutter-käyttöliittymän rakentamisessa!
Opi Dart tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 88
Usein kysytyt kysymykset
Onko oppitunti ”Asettelun peruswidgetit” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Mobiilikehitys Flutterilla-oppimispolun 3 oppituntia, myös oppitunnin “Asettelun peruswidgetit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Asettelun peruswidgetit”?
Ottakaa haltuun olennaiset asetteluwidgetit, kuten Row, Column, Container ja Stack, rakenteisten ja responsiivisten käyttöliittymien luomista varten. Harjoittelet Mobiilikehitys Flutterilla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Mobiilikehitys Flutterilla-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Mobiilikehitys Flutterilla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Asettelun peruswidgetit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Mobiilikehitys Flutterilla-oppitunnilla?
Kyllä. Jokainen Mobiilikehitys Flutterilla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tilattomat ja tilalliset widgetit
- Asettelun peruswidgetit
- Vuorovaikutteiset käyttöliittymäelementit
- Vieritettävien listojen rakentaminen ListView’lla