Flutter 组件之 Card控件

最新推荐文章于 2024-08-07 15:33:27 发布

吴光亮

最新推荐文章于 2024-08-07 15:33:27 发布

阅读量541

点赞数 1

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/m0_38013946/article/details/120880576

版权

Flutter 专栏收录该内容

57 篇文章 6 订阅

订阅专栏

这篇博客介绍了Flutter中的Card组件，展示了如何创建基本的Card以及带有自定义边框形状的Card。通过示例代码，解释了Card的属性如颜色、阴影、边框和外边距等，并提供了构建不同样式Card的方法。

摘要由CSDN通过智能技术生成

Card 属性介绍

请添加图片描述
Card 就是个容器，用途和 Container 很像，这里就不多赘述了，直接上代码。


import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: FMCardVC());
  }
}


class FMCardVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Card"),),
      body: _listView(),
    );
  }
  
  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(30),
      children: [
        _normalCard(),
        Padding(padding: EdgeInsets.all(30)),
        _shapeCard()
      ],
    );
  }
  
  Card _normalCard(){
    return Card(
      color: Colors.red, // 背景色
      shadowColor: Colors.yellow, // 阴影颜色
      elevation: 20, // 阴影高度
      borderOnForeground: false, // 是否在 child 前绘制 border，默认为 true
      margin: EdgeInsets.fromLTRB(0, 50, 0, 30), // 外边距

      child: Container(
        width: 100,
        height: 100,
        alignment: Alignment.center,
        child: Text("Noraml Card", style: TextStyle(color: Colors.white),),
      ),
    );
  }
  
  Card _shapeCard(){
    return Card(
      color: Colors.red, // 背景色
      shadowColor: Colors.yellow, // 阴影颜色
      elevation: 20, // 阴影高度
      borderOnForeground: false, // 是否在 child 前绘制 border，默认为 true
      margin: EdgeInsets.fromLTRB(0, 50, 0, 30), // 外边距

      // 边框
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(40),
        side: BorderSide(
          color: Colors.yellow,
          width: 3,
        ),
      ),

      child: Container(
        width: 100,
        height: 100,
        alignment: Alignment.center,
        child: Text("Shape Card", style: TextStyle(color: Colors.white),),
      ),
    );
  }
}