Card组件

Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立体感。

名称	类型	含义
margin	EdgeInsets	外边距
child	[]	子组件
elevation	int	组件反向排序
color	Colors	背景颜色
shadowColor	ShadowColor	阴影颜色
margin	EdgeInsets	外边距
clipBehavior	List	clipBehavior 内容溢出的剪切方式 Clip.none 不剪切 Clip.hardEdge 裁剪但不应用抗锯齿 Clip.antiAlias 裁剪而且抗锯齿 Clip.antiAliasWithSaveLayer 带有抗锯齿的剪辑，并在剪辑之后立即保存 saveLayer
shape	RoundedRectangleBorder	Card 的阴影效果，默认的阴影效果为圆角的长方形边。 shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),

Card 实现一个通讯录的卡片

import 'package:flutter/material.dart';
void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ), // ThemeData
            home: Scaffold(
                appBar: AppBar(
                    title: const Text("Flutter App")
                ), // AppBar
                body: const LayoutDemo(),
            ), // Scaffold
        ); // MaterialApp
    }
}
   
class LayoutDemo extends StatelessWidget {
    const LayoutDemo({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
        children: <Widget>[
            Card(
                shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
                elevation: 20,
                margin: const EdgeInsets.all(10),
                child: Column(
                    children: const <Widget>[
                        ListTile(
                            title: Text("张三", style: TextStyle(fontSize: 28)),
                            subtitle: Text("高级软件工程师"),
                        ),
                        Divider(),
                        ListTile(
                            title: Text("电话：1213214142"),
                        ),
                        ListTile(title: Text("地址：北京市海淀区"))
                    ],
                ), // Column
            ), // Card
            Card(
                shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10))
                    ), // RoundedRectangleBorder
                    // color: Colors.red,
                elevation: 20,
                margin: const EdgeInsets.all(10),
                child: Column(
                        children: const <Widget>[
                            ListTile(
                            title: Text("李四", style: TextStyle(fontSize: 28)),
                            subtitle: Text("高级软件工程师"),
                            ),
                            Divider(),
                            ListTile(
                            title: Text("电话：1213214142"),
                            ),
                            ListTile(title: Text("地址：北京市海淀区"))
                        ],
                    ), // Column
                ) // Card
            ],
        ); // ListView
    }
}

Card 实现一个图文列表卡片

import 'package:flutter/material.dart';
void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: Scaffold(
                appBar: AppBar(title: const Text("Flutter App")),
                body: const LayoutDemo(),
            ),
        );
    }
}

class LayoutDemo extends StatelessWidget {
    const LayoutDemo({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        // TODO: implement build
        return ListView(
            children: <Widget>[
                Card(
                    elevation:20,
                    shape: RoundedRectangleBorder(
                        borderRadius:BorderRadius.circular(10),
                    ), // RoundedRectangleBorder
                    margin: const EdgeInsets.all(10),
                    child: Column(
                        children: <Widget>[
                            AspectRatio(
                                aspectRatio: 20/9,
                                child:
                                Image.network("https://www.au-sonpo.co.jp/common/img/id0026.jpeg",fit: BoxFit.cover,),
                            ), // AspectRatio
                            ListTile(
                                leading: ClipOval(
                                    child: Image.network(
                                        "https://www.au-sonpo.co.jp/common/img/id0026.jpeg",
                                        fit: BoxFit.cover,height:60,width: 60
                                    ),
                                ),
                                title:const Text("xxxx"),
                                subtitle:const Text("xxxxxxx"),
                            ) // ListTile
                        ],
                    ), // Column
                ), // Card
                Card(
                    elevation:20,
                    shape: RoundedRectangleBorder(
                        borderRadius:BorderRadius.circular(10),
                    ), // RoundedRectangleBorder
                    margin: const EdgeInsets.all(10),
                    child: Column(
                        children: <Widget>[
                            AspectRatio(
                                aspectRatio: 20/9,
                                child: Image.network("https://www.au-sonpo.co.jp/common/img/id0026.jpeg", fit: BoxFit.cover,),
                            ), // AspectRatio
                            const ListTile(
                                leading: CircleAvatar(
                                    backgroundImage: NetworkImage('https://www.au-sonpo.co.jp/common/img/id0026.jpeg')
                                ),
                                title: Text("xxxxxxxx"),
                                subtitle: Text("xxxxxxxxxx"),
                            ) // ListTile
                        ],
                    ), // Column
                ) // Card
            ],
        ); // ListView
    }
}

CircleAvatar 实现一个圆形图片

radius 元的半径

const CircleAvatar(
    radius: 200,
    backgroundImage:
    NetworkImage("https://www.au-sonpo.co.jp/common/img/id0026.jpeg"),
)

基本上，CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中，以创建类似于边框的内容。

return const CircleAvatar(
    radius: 110,
    backgroundColor: Color(0xffFDCF09),
    child: CircleAvatar(
        radius: 100,
        backgroundImage: NetworkImage("https://www.au-sonpo.co.jp/common/img/id0026.jpeg"),
    )
)