Mobiludvikling med Flutter · Lektion

Grundlæggende layout-widgets

Bliv fortrolig med vigtige layout-widgets som Row, Column, Container og Stack for at skabe strukturerede og responsive brugergrænseflader.

Lektion 2 af 412 trin

Grundlæggende layout-widgets er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvorfor layouts er vigtige

I Flutter er alt en widget! Hvis du vil bygge komplekse og flotte brugergrænseflader, skal du arrangere disse widgets på skærmen.

Layoutwidgets er særlige widgets, der er udviklet til at hjælpe dig med at organisere andre widgets ved at definere deres størrelse, placering og hvordan de interagerer med hinanden.

Mød Container

Widgeten Container er en af de mest alsidige layoutwidgets. Tænk på den som en tilpasningsbar kasse, der kan indeholde én underordnet widget.

Du kan bruge den til at:

Tilføje indvendig eller udvendig margen
Angive baggrundsfarver eller dekorationer
Definere en bestemt bredde og højde
Transformere dens placering eller rotation

En simpel farvet kasse

Lad os oprette en grundlæggende Container med en underordnet Text-widget. Bemærk, hvordan vi angiver dens color og padding.

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),
            ),
          ),
        ),
      ),
    );
  }
}

Vandret med Row

Når du skal arrangere flere widgets side om side vandret, er Row-widgetten det oplagte valg. Den tager en liste over widgets som sine children.

Row forsøger automatisk at få sine children til at passe langs den vandrette akse, og du kan styre deres justering i rækken.

Række med knapper

Sådan kan du placere tre knapper ved siden af hinanden ved hjælp af en Row. Vi tilføjer også lidt afstand mellem dem.

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')),
            ],
          ),
        ),
      ),
    );
  }
}

Lodret med Column

Ligesom Row arrangerer widgets vandret, arrangerer Column-widgetten dem lodret, den ene under den anden.

Den tager også en liste over children og lader dig styre deres lodrette justering.

Stablede tekstfelter

Lad os oprette en enkel loginlignende formular ved hjælp af en Column, der stabler to TextFields og en knap lodret.

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')),
            ],
          ),
        ),
      ),
    );
  }
}

Justering af children

Både Row og Column bruger to vigtige egenskaber til justering:

mainAxisAlignment: Hvordan children placeres langs den primære akse (vandret for Row, lodret for Column). Eksempler: start, center, end, spaceAround.
crossAxisAlignment: Hvordan children placeres langs den vinkelrette akse (lodret for Row, vandret for Column). Eksempler: start, center, end, stretch.

De giver dig fin kontrol over dine layouts!

Overlapning med Stack

Nogle gange skal du placere widgets oven på hinanden, f.eks. tekst oven på et billede. Det er her, Stack-widgetten kommer ind i billedet.

Stack lader dig lægge flere children-widgets i lag. Du kan styre deres præcise placering i stacken ved hjælp af Positioned-widgetten.

Billede med tekst ovenpå

Lad os placere tekst direkte oven på et billede ved hjælp af en Stack. Vi bruger Positioned til at placere teksten præcist.

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)
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Layoutudfordring

Hvilke af de følgende widgets bruges primært til at arrangere flere children-widgets i én retning (enten vandret eller lodret)?

Besvar den i den interaktive lektion

Du har styr på layouts!

Flot arbejde! Du har nu fået styr på de grundlæggende layout-widgets i Flutter:

Container: En alsidig boks til enkelte children, som giver mulighed for at styre indvendig afstand, udvendig afstand, farve og størrelse.
Row: Arrangerer flere children vandret.
Column: Arrangerer flere children lodret.
Stack: Lægger children oven på hinanden og bruges ofte sammen med Positioned.

Det er afgørende at forstå disse widgets, når du bygger en Flutter-brugergrænseflade!

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Grundlæggende layout-widgets” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Grundlæggende layout-widgets”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Grundlæggende layout-widgets”?

Bliv fortrolig med vigtige layout-widgets som Row, Column, Container og Stack for at skabe strukturerede og responsive brugergrænseflader. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Grundlæggende layout-widgets”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Mobiludvikling med Flutter