笔录Flutter (七) Card、AspectRatio、CircleAvatar、MaterialButton、Wrap

Flutter练习demo

Card、AspectRatio、CircleAvatar、MaterialButton、Wrap 属性

AspectRatio

aspectRatio:宽高比

 aspectRatio: 7 / 8, // 设置宽高比

源码:

const AspectRatio({
    Key key,
    @required this.aspectRatio,
    Widget child
  }) : assert(aspectRatio != null),
       super(key: key, child: child);
Card

常用属性

  1. margin 外边距
  2. elevation 阴影大小
  3. shape圆角

源码:

 const Card({
    Key key,
    this.color,
    this.elevation,
    this.shape,
    this.borderOnForeground = true,
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  }) : assert(elevation == null || elevation >= 0.0),
       assert(borderOnForeground != null),
       super(key: key);
CircleAvatar

源码:

 const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,
    this.backgroundImage,
    this.foregroundColor,
    this.radius,
    this.minRadius,
    this.maxRadius,
  }) : assert(radius == null || (minRadius == null && maxRadius == null)),
       super(key: key);

Card、AspectRatio、CircleAvatar 使用

在这里插入图片描述

import 'package:flutter/material.dart';

class AspectRatioCardPage extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("AspectRatio、Card"),
        ),
        body: GridView.builder(
          itemCount: 10,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, childAspectRatio: 0.7),
          itemBuilder: _getWidget,
        ),
      ),
    );
  }

  Widget _getWidget(BuildContext context, int index) {
    return Card(
      margin: EdgeInsets.all(10),//外边距
      shape: RoundedRectangleBorder(//设置圆角
        borderRadius: BorderRadius.circular(5),
      ),
      elevation: 2,// 阴影大小
      child: Stack(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 7 / 8, // 设置宽高比
            child: Container(
              decoration: BoxDecoration(
                color: Colors.deepPurple,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(5), topRight: Radius.circular(5)),
              ),
            ),
          ),
          Align(
              alignment: Alignment.bottomCenter,
              child: ListTile(
                title: Text(
                  "美女Flutter",
                  style: TextStyle(fontSize: 16),
                ),
                subtitle: Text(
                  "Flutter副标题",
                  style: TextStyle(fontSize: 12),
                ),
                leading: CircleAvatar(// 专门处理头像的圆角widget
                  backgroundImage: AssetImage("images/z.jpg"),
                ),
              )),
        ],
      ),
    );
  }
}

MaterialButton常用属性

在这里插入图片描述
属性有很多具体可自行尝试:
源码:

const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onHighlightChanged,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child,
  }) : super(key: key);

这里就介绍MaterialButton风格的RaisedButton。

wrap属性

  1. Wrap 可以实现流布局
  2. 单行时的Wrap 跟 Row 展现形式几乎一样的,单列的 Wrap 则跟 Column 表 现几乎一致
  3. Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,mainAxis 上空 间不足时,则向 crossAxis 上去扩展显示。
    源码:
Wrap({
    Key key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,//主轴方向上的间距
    //run 的对齐方式。run 可以理解为新的行或者 列,如果是水平方向布局的话,run 可以理解 为新的一行
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0, //run 的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    //定义了 children 摆放顺序,默认是 down,见 Flex 相关属性介绍
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[],
  }) : super(key: key, children: children);

MaterialButton、Wrap 使用

在这里插入图片描述

import 'package:flutter/material.dart';

class Wrap_RaisedButton_Page extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("AspectRatio、Card"),
        ),
        body:Wrap(
          runSpacing: 20,
          spacing: 10,
          children: <Widget>[
            _getWidget("按钮——1"),
            _getWidget("按钮——2"),
            _getWidget("按钮——3"),
            _getWidget("按钮——4"),
            _getWidget("按钮——5"),
            _getWidget("按钮——6"),
          ],
        ),
      ),
    );
  }

  Widget _getWidget(String btntv) {
    return RaisedButton(
      onPressed: () {
        print("sadsadasdas________");
      },
//      disabledColor: Colors.red,
      elevation: 5,
      child: Text(btntv),
      color: Colors.deepPurple,
      splashColor: Colors.amber,//点击时的水波纹颜色 ,
      highlightColor: Colors.red,//点击时的颜色
      textTheme: ButtonTextTheme.accent,
    );
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值