Menu
CoddyTech

Элементы списка

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 2 из 33.

Большинство строк в списке выглядят похоже: основная строка, иногда строка поменьше под ней, возможно, значок с каждой стороны. ListTile — это готовая строка с нужными размерами и отступами.

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

title — это основная строка. subtitle располагается под ней, имеет меньший размер и более мягкий цвет. Оба параметра принимают виджет, обычно Text.

ListTile имеет ту же ширину, что и список, и увеличивается, чтобы вместить две строки, если у него есть подзаголовок. Добавь несколько таких элементов в ListView, и получится список контактов.

challenge icon

Задание

Легко

Строка Ады уже является элементом ListTile. Преврати два других текста в элементы, как у неё:

  • Alan Turing с подзаголовком +1 555 0102
  • Grace Hopper с подзаголовком +1 555 0103

Попробуйте сами

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: ListView(
          children: const [
            ListTile(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Списки и экраны

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter