Malinkang's blog

人生最可悲的事情,莫过于胸怀大志,却又虚度光阴。

你好,我是马林康,一名Android开发者。


Flutter常用组件

目录

Text

Text类似于Android里的TextView控件,用于展示文本。

Text所有属性:

  const Text(
    //数据  
    this.data, {
    Key key,
    this.style,//设置样式
    this.strutStyle,
    this.textAlign,//设置对齐方式
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow, //溢出显示
    this.textScaleFactor,
    this.maxLines,//最大行数
    this.semanticsLabel,
    this.textWidthBasis,
  }) 

style属性是一个TextStyle对象,TextStyle的所有属性:

const TextStyle({
    this.inherit = true,
    this.color, //文字颜色
    this.backgroundColor,
    this.fontSize,//字体大小
    this.fontWeight,
    this.fontStyle,//字体样式值取FontStyle.normal或FontStyle.italic
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.fontFeatures,
    this.decoration,//文本装饰器、为文本设置上划线、下划线和删除线
    this.decorationColor, //装饰器颜色
    this.decorationStyle, //装饰器样式、比如虚线、实线、波浪线
    this.decorationThickness,
    this.debugLabel,
    String fontFamily,
    List<String> fontFamilyFallback,
    String package,
  })

示例:

Text(
    "噫吁嚱,危乎高哉!蜀道之难,难于上青天!",
    textAlign: TextAlign.center,
    textDirection: TextDirection.ltr,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
        color: Colors.black54,
        fontSize: 30,
        decoration: TextDecoration.underline,
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.wavy,
        decorationThickness: 2,
        fontStyle: FontStyle.italic),
)

Image

Image类似Android里的ImageView控件,用于展示图片。Image支持加载网络图片和资源文件中的图片等等。

方法 说明
Image.asset 从asset资源文件中获取图片
Image.network 从网络获取图片
Image.file 从本地file文件中获取图片
Image.memory 从内存中获取图片

Image所有属性

 Image.asset(
    String name, {
    Key key,
    AssetBundle bundle,
    this.frameBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,//设置缩放
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    String package,
    this.filterQuality = FilterQuality.low,
    int cacheWidth,
    int cacheHeight,
  }) 

示例:

Image.asset(
  "assets/images/cat.jpeg",
  fit: BoxFit.contain,
  width: 300,
  height: 300,
))

image-20200209123808452

Column和Row

ColumnRow类似于Android里的LinearLayout。常用属性如下:

  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],//设置子widget
  })

MainAxisAlignmentcrossAxisAlignment属性,类似于Android里的layout_gravitygravity,分别用于设置控件的对齐和内容的对齐

MainAxisAlignment示例

Scaffold(
    appBar: AppBar(title: Text('Flutter')),
    body: Column(
        children: <Widget>[
        Text("MainAxisAlignment.start",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.center",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.spaceAround",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.spaceBetween",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.spaceEvenly",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        ),
        Text("MainAxisAlignment.end",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            Icon(Icons.star,color: Colors.yellow, size: 50),
            ],
        )
        ],
    ),
),

crossAxisAlignment

Scaffold(
    appBar: AppBar(title: Text('Flutter')),
    body: Column(
        children: <Widget>[
        Text("CrossAxisAlignment.start",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 30),
            Icon(Icons.star,color: Colors.yellow, size: 60),
            Icon(Icons.star,color: Colors.yellow, size: 30),
            ],
        ),
        Text("CrossAxisAlignment.center",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 30),
            Icon(Icons.star,color: Colors.yellow, size: 60),
            Icon(Icons.star,color: Colors.yellow, size: 30),
            ],
        ),
        Text(" CrossAxisAlignment.end",style:TextStyle(
            color: Colors.blueAccent,
            fontSize: 18
        )),
        Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
            Icon(Icons.star,color: Colors.yellow, size: 30),
            Icon(Icons.star,color: Colors.yellow, size: 60),
            Icon(Icons.star,color: Colors.yellow, size: 30),
            ],
        )
        ],
    ),
),

Container

Container是一个拥有绘制、定位、调整大小的widget

padding和margin

padding和margin分别设置Container的内边距和外边距。可取值包括下面四个:

  • EdgeInsets.all(50):设置所有的padding为同一个值50。
  • EdgeInsets.only(left: 50,right: 50):只设置左边和右边。
  • EdgeInsets.fromLTRB(50,10,50,10):分别设置左上右下的值为50、10。
  • EdgeInsets.symmetric(vertical: 10,horizontal: 50):如果上下或者左右的padding值一样可以指定vertical的值为上下的padding值。horizontal指定左右的padding值。
Scaffold(
    appBar: AppBar(title: Text('Container')),
    body: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
        Container(
            padding: EdgeInsets.all(50),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "确定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        Container(
            padding: EdgeInsets.only(left: 50,right: 50),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "确定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        Container(
            padding: EdgeInsets.fromLTRB(50, 10, 50, 10),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "确定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        Container(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 1),
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Text(
            "确定",
            style: TextStyle(color: Colors.red),
            ),
        ),
        ],
    ),
)),

width和height

widthheight指定宽高,如果不指定则为子widget的宽高。如果想要完全撑满父容器,可以将widthheight设置为double.infinity

decoration

decoration经常被用来改变一个Container的展示效果。其概念类似与android中的shape。一般实际场景中会使用他的子类BoxDecoration。BoxDecoration提供了对背景色,边框,圆角,阴影和渐变等功能的定制能力。

  • image: DecorationImage设置一张图片作为背景。
  • border: Border设置边界。
  • borderRadius: BorderRadius设置边界圆角。当shapeBoxShape.circle设置borderRadius将不起作用
  • shape: BoxShape设置形状。
  • gradient设置渐变。可选值包括三种类型的渐变LinearGradientRadialGradientSweepGradient
Scaffold(
    appBar: AppBar(title: Text('BorderRadius')),
    body: Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
            Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
                color: Colors.yellow,
                //设置图片
                image: DecorationImage(
                    fit: BoxFit.fitWidth,
                    image: NetworkImage(
                    'https://flutter.io/images/catalog-widget-placeholder.png',
                    ),
                ),
                //设置边界
                border: Border.all(color: Colors.deepOrange, width: 3),
                //设置阴影
                boxShadow: const [
                    BoxShadow(blurRadius: 10),
                ],
                //设置边界圆角
                borderRadius: BorderRadius.all(Radius.circular(18))),
            ),
            Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
                gradient: RadialGradient(
                //渐变
                colors: const [
                    Colors.green,
                    Colors.deepOrange,
                    Colors.pinkAccent,
                    Colors.deepPurple
                ],
                ),
                //设置边界圆角
                shape: BoxShape.circle,
            ),
            )
        ],
        ),
    ),
),

参考

最近的文章

《Effective Java》读书笔记 第3章 对于所有对象都通用的方法

第8条:覆盖equals时请遵守通用约定在覆盖equals方法的时候,你必须要遵守它的通用约定。 自反性(reflexive)。对于任何非null的引用值x,x.equals(x)必须返回true。 对称性(symmetric)。对于任何非null的引用值x和y,当且仅当y.equals(x)返 …

于  , 继续阅读
更早的文章

Dart语言指南

这个页面展示如何使用 Dart 的各个主要特性,从变量、运算符到类和库,并且假定你已经会使用其他编程语言编写代码。要详细了解 Dart 核心库相关内容,请查阅 Dart 库教程。当你想对一个语言特性深入了解时,无论何时都可以查阅 Dart 语言规范。 小说明:在 DartPad 上,你可以尝试 D …

于  继续阅读
comments powered by Disqus