0
点赞
收藏
分享

微信扫一扫

Flutter Card

沪钢木子 2021-10-04 阅读 183

经典的Material UI卡片式布局,设计出来的UI很有质感。这个使用起来很简单。


import 'package:flutter/material.dart';

class FlutterCardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.blueAccent,
      //z轴的高度,设置card的阴影
      elevation: 20.0,
      //设置shape,这里设置成了R角
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),),
      //对Widget截取的行为,比如这里 Clip.antiAlias 指抗锯齿
      clipBehavior: Clip.antiAlias,
      semanticContainer: false,
      child: getChild(),
    );
  }

  getChild() {
    return Container(
      color: Colors.deepPurpleAccent,
      width: 200,
      height: 150,
      alignment: Alignment.center,
      child: Text(
        "Card",
        style: TextStyle(fontSize: 28, color: Colors.white),
      ),
    );
  }
}

我们可以通过设置shape,来达到各种效果。例如:


borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.zero,
            bottomLeft: Radius.zero,
            bottomRight: Radius.circular(20.0)),
      )


代码地址

Flutter 豆瓣客户端,诚心开源
Flutter Container
Flutter SafeArea
Flutter Row Column MainAxisAlignment Expanded
Flutter Image全解析
Flutter 常用按钮总结
Flutter ListView豆瓣电影排行榜
Flutter Card
Flutter Navigator&Router(导航与路由)
OverscrollNotification不起效果引起的Flutter感悟分享
Flutter 上拉抽屉实现
Flutter 豆瓣客户端,诚心开源
Flutter 更改状态栏颜色

举报

相关推荐

0 条评论