【Flutter实战】定位装饰权重组件及柱状图案例

【Flutter实战】定位装饰权重组件及柱状图案例

老孟导读:Flutter中有这么一类组件,用于定位、装饰、控制子组件,好比 Container (定位、装饰)、Expanded (扩展)、SizedBox (牢固尺寸)、AspectRatio (宽高比)、FractionallySizedBox (占父组件比例)。这些组件的使用频率异常高,下面逐一先容,最后给出项目中现实案例熟悉其用法。
【Flutter实战】系列文章地址:http://laomengit.com/guide/introduction/mobile_system.html

Container

Container 是最常用的组件之一,它是单容器类组件,即仅能包罗一个子组件,用于装饰和定位子组件,例如设置靠山颜色、形状等。

最简朴的用法如下:

Container(
	child: Text('老孟'),
 )

子组件不会发生任何外观上的转变:
【Flutter实战】定位装饰权重组件及柱状图案例

设置靠山颜色:

Container(
	color: Colors.blue,
    child: Text('老孟'),
)

【Flutter实战】定位装饰权重组件及柱状图案例

设置内边距( padding ) 和 外边距( margin )

Container(
      color: Colors.blue,
      child: Container(
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(20),
        color: Colors.red,
        child: Text('老孟'),
      ),
    )

效果如下:
【Flutter实战】定位装饰权重组件及柱状图案例

decoration 属性设置子组件的靠山颜色、形状等。设置靠山为圆形,颜色为蓝色:

Container(
  child: Text('老孟,专注分享Flutter手艺及应用'),
  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
)

【Flutter实战】定位装饰权重组件及柱状图案例

默认情形下,圆形的直径即是 Container 窄边长度,相当于在矩形内绘制内切圆。

上面的情形显著不是我们希望看到了,希望靠山是圆角矩形:

Container(
        child: Text('老孟,专注分享Flutter手艺及应用'),
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Colors.blue),
      )

【Flutter实战】定位装饰权重组件及柱状图案例

除了靠山我们可以设置边框效果,代码如下:

Container(
        child: Text('老孟,专注分享Flutter手艺及应用'),
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: Colors.blue,
            width: 2,
          ),
        ),
      )

【Flutter实战】定位装饰权重组件及柱状图案例

建立圆角图片和圆形图片:

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image:  DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
    )

【Flutter实战】定位装饰权重组件及柱状图案例
修改其形状为圆形,代码如下:

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        shape: BoxShape.circle,
      ),
    )

【Flutter实战】定位装饰权重组件及柱状图案例

设置对齐方式为居中,靠山色为蓝色,代码如下:

Container(
        color: Colors.blue,
        child: Text('老孟,一个有态度的程序员'),
        alignment: Alignment.center,
      )

【Flutter实战】定位装饰权重组件及柱状图案例

注重:设置对齐方式后,Container将会充满其父控件,相当于Android中 match_parent

Alignment 已经封装了常用的位置,

【Flutter实战】定位装饰权重组件及柱状图案例

通过名字就知道其位置,这里要先容一下其他的位置,好比在距离左上角1/4处:

Container(
  alignment: Alignment(-.5,-.5),
  child: Text('老孟,专注分享Flutter手艺及应用'),
)

以是这里有一个异常重要的坐标系,Alignment 坐标系如下:

【Flutter实战】定位装饰权重组件及柱状图案例

组件的中央为坐标原点。

设置牢固的宽高属性:

Container(
        color: Colors.blue,
        child: Text('老孟,专注分享Flutter手艺及应用'),
        alignment: Alignment.center,
        height: 60,
        width: 250,
      )

【Flutter实战】定位装饰权重组件及柱状图案例

通过 constraints 属性设置最大/小宽、高来确定巨细,若是不设置,默认最小宽高是0,最大宽高是无限大(double.infinity),约束width代码如下:

Container(
        color: Colors.blue,
        child: Text('老孟,专注分享Flutter手艺及应用'),
        alignment: Alignment.center,
        constraints: BoxConstraints(
          maxHeight: 100,
          maxWidth: 300,
          minHeight: 100,
          minWidth: 100,
        ),
      )

【Flutter实战】定位装饰权重组件及柱状图案例

通过transform可以旋转、平移、缩放Container,旋转代码如下:

Container(
        color: Colors.blue,
        child: Text('老孟,专注分享Flutter手艺及应用'),
        alignment: Alignment.center,
        height: 60,
        width: 250,
        transform: Matrix4.rotationZ(0.5),
      )

注重:Matrix4.rotationZ()参数的单元是弧度而不是角度

【Flutter实战】定位装饰权重组件及柱状图案例

SizedBox

SizedBox 是具有牢固宽高的组件,直接指定详细的宽高,用法如下:

SizedBox(
        height: 60,
        width: 200,
        child: Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('老孟,专注分享Flutter手艺及应用'),
        ),
      )

【Flutter实战】定位装饰权重组件及柱状图案例

设置尺寸无限大,如下:

SizedBox(
  height: double.infinity,
  width: double.infinity,
  ...
)

虽然设置了无限大,子控件是否会无限长呢?不,不会,子控件依然会受到父组件的约束,会扩展到父组件的尺寸,另有一个便捷的方式设置此方式:

SizedBox.expand(
  child: Text('老孟,专注分享Flutter手艺及应用'),
)

SizedBox 可以没有子组件,但仍然会占用空间,以是 SizedBox 异常适合控制2个组件之间的清闲,用法如下:

Column(
          children: <Widget>[
            Container(height: 30,color: Colors.blue,),
            SizedBox(height: 30,),
            Container(height: 30,color: Colors.red,),
          ],
        )

【Flutter实战】定位装饰权重组件及柱状图案例

AspectRatio

AspectRatio 是牢固宽高比的组件,用法如下:

Container(
        height: 300,
        width: 300,
        color: Colors.blue,
        alignment: Alignment.center,
        child: AspectRatio(
          aspectRatio: 2 / 1,
          child: Container(color: Colors.red,),
        ),
      )

aspectRatio 是宽高比,可以直接写成分数的形式,也可以写成小数的形式,但建议写成分数的形式,可读性更高。效果如下:

一文入门:XGBoost与手推二阶导

【Flutter实战】定位装饰权重组件及柱状图案例

FractionallySizedBox

FractionallySizedBox 是一个相对父组件尺寸的组件,好比占父组件的70%:

Container(
  height: 200,
  width: 200,
  color: Colors.blue,
  child: FractionallySizedBox(
    widthFactor: .8,
    heightFactor: .3,
    child: Container(
      color: Colors.red,
    ),
  ),
)

【Flutter实战】定位装饰权重组件及柱状图案例

通过 alignment 参数控制子组件显示的位置,默以为居中,用法如下:

FractionallySizedBox(
  alignment: Alignment.center,
  ...
)

权重组件

ExpandedFlexibleSpacer 都是具有权重属性的组件,可以控制 Row、Column、Flex 的子控件若何结构的组件。

Flexible 组件可以控制 Row、Column、Flex 的子控件占满父组件,好比,Row 中有3个子组件,双方的宽是100,中心的占满剩余的空间,代码如下:

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

【Flutter实战】定位装饰权重组件及柱状图案例

照样有3个子组件,第一个占1/6,第二个占2/6,第三个占3/6,代码如下:

Column(
      children: <Widget>[
        Flexible(
          flex: 1,
          child: Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text('1 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Text('2 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
        Flexible(
          flex: 3,
          child: Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: Text('3 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
      ],
    )

【Flutter实战】定位装饰权重组件及柱状图案例

子组件占比 = 当前子控件 flex / 所有子组件 flex 之和。

Flexible中 fit 参数示意填满剩余空间的方式,说明如下:

  • tight:必须(强制)填满剩余空间。
  • loose:尽可能大的填满剩余空间,然则可以不填满。

这2个看上去不是很好明白啊,什么叫尽可能大的填满剩余空间?什么时候填满?看下面的例子:

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
			  child: Text('Container',style: TextStyle(color: Colors.white),),
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

【Flutter实战】定位装饰权重组件及柱状图案例

这段代码是在最上面代码的基础上给中心的红色Container添加了Text子控件,此时红色Container就不在充满空间,再给Container添加对齐方式,代码如下:

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
			  alignment: Alignment.center,
			  child: Text('Container',style: TextStyle(color: Colors.white),),
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

【Flutter实战】定位装饰权重组件及柱状图案例
此时又填满剩余空间。

人人是否还记得 Container 组件的巨细是若何调整的吗?Container 默认是适配子控件巨细的,但当设置对齐方式时 Container 将会填满父组件,因此是否填满剩余空间取决于子组件是否需要填满父组件。

若是把 Flexible 中子组件由 Container 改为 OutlineButton,代码如下:

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
          child: OutlineButton(
            child: Text('OutlineButton'),
          ),
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

OutlineButton 正常情形下是不充满父组件的,因此最终的效果应该是不填满剩余空间:
【Flutter实战】定位装饰权重组件及柱状图案例

下面再来先容另一个权重组件 Expanded ,源代码如下:

class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

Expanded 继续字 Flexible,fit 参数牢固为 FlexFit.tight,也就是说 Expanded 必须(强制)填满剩余空间。上面的 OutlineButton 想要充满剩余空间可以直接使用 Expanded :

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Expanded(
          child: OutlineButton(
            child: Text('OutlineButton'),
          ),
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

【Flutter实战】定位装饰权重组件及柱状图案例

Spacer 也是一个权重组件,源代码如下:

@override
Widget build(BuildContext context) {
  return Expanded(
    flex: flex,
    child: const SizedBox.shrink(),
  );
}

Spacer 的本质也是 Expanded 的实现的,和Expanded的区别是:Expanded 可以设置子控件,而 Spacer 的子控件尺寸是0,因此Spacer适用于撑开 Row、Column、Flex 的子控件的清闲,用法如下:

Row(
  children: <Widget>[
    Container(width: 100,height: 50,color: Colors.green,),
    Spacer(flex: 2,),
    Container(width: 100,height: 50,color: Colors.blue,),
    Spacer(),
    Container(width: 100,height: 50,color: Colors.red,),
  ],
)

【Flutter实战】定位装饰权重组件及柱状图案例

三个权重组建总结如下

  • Spacer 是通过 Expanded 实现的,Expanded继续自Flexible。
  • 填满剩余空间直接使用Expanded更利便。
  • Spacer 用于撑开 Row、Column、Flex 的子组件的清闲。

仿 掘金-我 效果

先看下效果:

【Flutter实战】定位装饰权重组件及柱状图案例

拿到效果图先不要慌 (取出手机摄影发个朋友圈),整个列表每一行的结构基本一样,以是先写出一行的效果:

class _SettingItem extends StatelessWidget {
  const _SettingItem(
      {Key key, this.iconData, this.iconColor, this.title, this.suffix})
      : super(key: key);

  final IconData iconData;
  final Color iconColor;
  final String title;
  final Widget suffix;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 30,
          ),
          Icon(iconData,color: iconColor,),
          SizedBox(
            width: 30,
          ),
          Expanded(
            child: Text('$title'),
          ),
          suffix,
          SizedBox(
            width: 15,
          ),
        ],
      ),
    );
  }
}

新闻中央和其他行最后的样式不一样,单独封装,带红色靠山的组件:

class _NotificationsText extends StatelessWidget {
  final String text;

  const _NotificationsText({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(50)),
          color: Colors.red),
      child: Text(
        '$text',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

灰色后缀组件:

class _Suffix extends StatelessWidget {
  final String text;

  const _Suffix({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      '$text',
      style: TextStyle(color: Colors.grey.withOpacity(.5)),
    );
  }
}

将这些封装好的组件组合起来:

class SettingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _SettingItem(
          iconData: Icons.notifications,
          iconColor: Colors.blue,
          title: '新闻中央',
          suffix: _NotificationsText(
            text: '2',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.thumb_up,
          iconColor: Colors.green,
          title: '我赞过的',
          suffix: _Suffix(
            text: '121篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.grade,
          iconColor: Colors.yellow,
          title: '珍藏集',
          suffix: _Suffix(
            text: '2个',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.shopping_basket,
          iconColor: Colors.yellow,
          title: '已购小册',
          suffix: _Suffix(
            text: '100个',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.account_balance_wallet,
          iconColor: Colors.blue,
          title: '我的钱包',
          suffix: _Suffix(
            text: '10万',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.location_on,
          iconColor: Colors.grey,
          title: '阅读过的文章',
          suffix: _Suffix(
            text: '1034篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.local_offer,
          iconColor: Colors.grey,
          title: '标签治理',
          suffix: _Suffix(
            text: '27个',
          ),
        ),
      ],
    );
  }
}

至此就竣事了。

柱状图

先来看下效果:

【Flutter实战】定位装饰权重组件及柱状图案例

关于动画部门的内容会在后面的章节详细先容。这个效果分为3大部门:

  1. 坐标轴,左边和底部玄色直线。
  2. 矩形柱状图。
  3. 动画控制部门。

坐标轴的实现如下:

class _Axis extends StatelessWidget {
  final Widget child;

  const _Axis({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          left: BorderSide(color: Colors.black, width: 2),
          bottom: BorderSide(color: Colors.black, width: 2),
        ),
      ),
      child: child,
    );
  }
}

【Flutter实战】定位装饰权重组件及柱状图案例

单个柱状图实现:

class _Cylinder extends StatelessWidget {
  final double height;
  final double width;
  final Color color;

  const _Cylinder({Key key, this.height, this.width, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 1),
      height: height,
      width: width,
      color: color,
    );
  }
}

天生多个柱状图:

final double _width = 20.0;
List<double> _heightList = [60.0, 80.0, 100.0, 120.0, 140.0];

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: List.generate(_heightList.length, (index) {
      return _Cylinder(
        height: _heightList[index],
        width: _width,
        color: Colors.primaries[index % Colors.primaries.length],
      );
    }))

【Flutter实战】定位装饰权重组件及柱状图案例

将此合并,然后更改每一个柱状图的高度:

class CylinderChart extends StatefulWidget {
  @override
  _CylinderChartState createState() => _CylinderChartState();
}

class _CylinderChartState extends State<CylinderChart> {
  final double _width = 20.0;
  List<double> _heightList = [60.0, 80.0, 100.0, 120.0, 140.0];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 250,
        child: Stack(
          children: <Widget>[
            _Axis(),
            Positioned.fill(
              left: 5,
              right: 5,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: List.generate(_heightList.length, (index) {
                    return _Cylinder(
                      height: _heightList[index],
                      width: _width,
                      color: Colors.primaries[index % Colors.primaries.length],
                    );
                  })),
            ),
            Positioned(
              top: 0,
              left: 30,
              child: OutlineButton(
                child: Text('反转'),
                onPressed: () {
                  setState(() {
                    _heightList = _heightList.reversed.toList();
                  });
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

搞定。

交流

老孟Flutter博客地址(330个控件用法):http://laomengit.com

迎接加入Flutter交流群(微信:laomengit)、关注民众号【老孟Flutter】:

【Flutter实战】定位装饰权重组件及柱状图案例 【Flutter实战】定位装饰权重组件及柱状图案例

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/17597.html