笔录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,
    );
  }
}