探索 Flutter Training App: 打造跨平台移动应用的新旅程

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  List<Widget> _buildCards(BuildContext context) {
    return [
      _buildCard(context, 'assets/placeholders/placeholder_1.png', 'Title 1', 'Description 1'),
      _buildCard(context, 'assets/placeholders/placeholder_2.png', 'Title 2', 'Description 2'),
      _buildCard(context, 'assets/placeholders/placeholder_3.png', 'Title 3', 'Description 3'),
      // ...
    ];
  }
 
  Widget _buildCard(BuildContext context, String imagePath, String title, String description) {
    return Card(
      child: Column(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 16/9,
            child: Image.asset(
              imagePath,
              fit: BoxFit.cover,
            ),
          ),
          ListTile(
            title: Text(title),
            subtitle: Text(description),
          ),
        ],
      ),
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Training App'),
      ),
      body: ListView(
        children: _buildCards(context),
      ),
    );
  }
}

这个代码示例展示了如何在Flutter中创建一个简单的UI列表，其中每个列表项都是一个卡片（Card），卡片包含一个图片和一些文本信息。这个过程展示了如何使用ListView来组织一个滚动列表，以及如何使用Image和Text小部件来展示不同的媒体内容和文本信息。这是学习Flutter布局和列表构建的一个很好的起点。