Flutter（五）：ListView、Card

ListView

import 'package:flutter/material.dart';class Item {  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 createState() => _ListViewPageState();}class _ListViewPageState extends State {  List 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 createState() => _CardPageState();}class _CardPageState extends State {  @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),                    ],                  ),                ),              ],            ),          ),        ],      ),    );  }}