Flutter（五）：ListView、Card

ListView

import 'package:flutter/material.dart';

class Item<T, K> {
  final Icon icon;
  final T title;
  final K secondary;

  const Item({required this.icon, required this.title, required this.secondary});
}

class ListViewPage extends StatefulWidget {
  const ListViewPage({super.key});

  @override
  State<ListViewPage> createState() => _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {
  List<Item<String, String>> items = const [
    Item(icon: Icon(Icons.face), title: "赵", secondary: "Zhao"),
    Item(icon: Icon(Icons.face_2), title: "钱", secondary: "Qian"),
    Item(icon: Icon(Icons.face_3), title: "孙", secondary: "Sun"),
    Item(icon: Icon(Icons.face_4), title: "李", secondary: "Li"),
    Item(icon: Icon(Icons.face_5), title: "周", secondary: "Zhou"),
    Item(icon: Icon(Icons.face_6), title: "吴", secondary: "Wu"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ListView 布局')),
      body: SingleChildScrollView(
        child: Wrap(
          children: [
            const Text('ListView'),
            SizedBox(
              height: 100,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(width: 100, color: Colors.red),
                  const VerticalDivider(),
                  Container(width: 200, color: Colors.orange),
                  const VerticalDivider(),
                  Container(width: 150, color: Colors.yellow),
                  const VerticalDivider(),
                  Container(width: 300, color: Colors.green),
                  const VerticalDivider(),
                  Container(width: 250, color: Colors.cyan),
                ],
              ),
            ),
            const Text('ListView.separated'),
            ListView.separated(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  leading: Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: Colors.black12,
                      borderRadius: const BorderRadius.all(Radius.circular(20)),
                      border: Border.all(color: Colors.cyan, width: 1),
                    ),
                    child: items[index].icon,
                  ),
                  title: Text(items[index].title),
                  subtitle: Text(items[index].secondary),
                  trailing: const Icon(Icons.chevron_right),
                  iconColor: Colors.blue,
                );
              },
              separatorBuilder: (BuildContext context, int index) {
                return const Divider(color: Colors.grey);
              },
              itemCount: items.length,
            ),
          ],
        ),
      ),
    );
  }
}

Card

import 'package:flutter/material.dart';

class CardPage extends StatefulWidget {
  const CardPage({super.key});

  @override
  State<CardPage> createState() => _CardPageState();
}

class _CardPageState extends State<CardPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Card 布局')),
      body: Wrap(
        children: [
          Card(
            margin: const EdgeInsets.all(10),
            child: Column(
              children: [
                Container(
                  height: 50,
                  padding: const EdgeInsets.only(left: 10, right: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text('Card Title', style: TextStyle(fontSize: 18)),
                      TextButton(
                        onPressed: () => print('more...'),
                        style: TextButton.styleFrom(minimumSize: Size.zero),
                        child: const Text('more'),
                      ),
                    ],
                  ),
                ),
                const Divider(height: 0),
                Image.network(
                  'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
                const Divider(height: 0),
                ListTile(
                  leading: Container(
                    width: 40,
                    height: 40,
                    decoration: const BoxDecoration(
                      color: Colors.lightBlue,
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    child: const Icon(Icons.face, color: Colors.white),
                  ),
                  title: const Text('Card Title'),
                  subtitle: const Text('This is the description ...'),
                ),
                const Divider(height: 0),
                SizedBox(
                  height: 50,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      IconButton(onPressed: () => print('设置'), icon: const Icon(Icons.settings), color: Colors.grey),
                      const VerticalDivider(),
                      IconButton(onPressed: () => print('编辑'), icon: const Icon(Icons.edit), color: Colors.grey),
                      const VerticalDivider(),
                      IconButton(onPressed: () => print('更多'), icon: const Icon(Icons.more), color: Colors.grey),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}