Flutter学习笔记10-AspectRatio、Card、CircleAvatar组件快速上手_flutter aspectratio card circleavatar组件-优快云博客

本文链接：https://blog.youkuaiyun.com/convex1009848621/article/details/127744198

本文介绍了在Flutter中如何使用AspectRatio来实现一个容器的高度为宽度一半的布局，并展示了使用Card组件构建列表项的方法，包括设置阴影、边框圆角等样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习视频地址：https://www.bilibili.com/video/BV1S4411E7LY?p=29&vd_source=cee744cae4ead27f8193fc7904647073

学习笔记
1.显示一个容器，高度是宽度的一半

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Demo"),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 2 / 1,
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

显示效果
在这里插入图片描述

2.使用Card的组件

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          elevation: 10,
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text("john"),
                subtitle: Text("flutter dev"),
                leading: CircleAvatar(
                  backgroundColor: Colors.blue,
                ),
              )
            ],
          ),
        ),
        Card(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          elevation: 10,
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text("jack"),
                subtitle: Text("android dev"),
                leading: CircleAvatar(
                  backgroundColor: Colors.green,
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}