Flutter之常用组件

基础组件

文本组件

Text

用于显示简单样式文本，包含一些控制样式属性

Text(
"Text",
maxLines: 1, 
overflow: TextOverflow.ellipsis, // 超出部分...
style: TextStyle(
    fontSize: 12, color: Color(0xFF333333), fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
)

按钮与手势组件

IconButton

IconButton是一个可点击的Icon，不包括文字

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

RaisedButton

默认灰色的带阴影的按钮

RaisedButton(
child: Text("Text"),
onPressed: () {
    print("Text");
    })

带图标的按钮

RaisedButton.icon(
onPressed: () {
    print("Text");
    },
    icon: Icon(Icons.send),
    label: Text("Text"))

手势组件

GestureDetector

GestureDetector(
      child: Text("Text"),
      onTapUp: () {
        print("onTapUp");
      },
      onTapDown: () {
        print("onTapDown");
      },
      onTapCancel: () {
        print("onTapCancel");
      },
      onTap: () {
        print("onTap");
      },
      onDoubleTap: () {
        print("onDoubleTap");
      },
      onLongPress: () {
        print("onLongPress");
      },
    )

图片组件

Image

Widget image;
    if (this.imgUrl.isEmpty) {
      image = Image.asset(
        "placeholderPath",
        height: 75,
        width: 124,
        alignment: Alignment.center,
        repeat: ImageRepeat.noRepeat,
      );
    } else {
      image = FadeInImage.assetNetwork(
        fit: BoxFit.fill,
        placeholder: "placeholderPath",
        image: "http://xxxxx.png",
        height: 75,
        width: 124,
      );
    }
    return image;

单选框和复选框

Checkbox

Checkbox(
      value: isSelected,
      activeColor: Colors.red,
      onChanged: (value) {
        print(value);
      },
    )

单选开关

Switch(
      value: isSelected,
      activeColor: Colors.red,
      onChanged: (value){
      print(value);
    },)

裁剪组件

剪裁处理组件
Clip的相关组件：
ClipOval：圆形裁剪
ClipRRect：圆角矩形裁剪
ClipRect：矩形裁剪
ClipPath：路径裁剪

ClipOval(
child: SizeBox(
width: 100, height: 100, child: Image.network("http://xxxxx.png")),
)

隐藏与透明组件

opacity

透明度组件

Opacity(
opacity: 0.5,
child: Text("Text"),
)

Visibility

控制子组件是否可见的组件

Visibility(
visible: false,// 子组件是否可见，默认true
child: Text("Text"),// 子组件
replacement: Text("data"),// 不可见时显示的组件（当maintainState=false）
maintainState: true,//不可见时是否维持状态，默认为false
)

效果组件

InkWell

点击时有阴影效果

InkWell(
child: Text("Text"),
onTap: () {
print("Text");
},
)

容器类组件

脚手架

int _selectedIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(// 脚手架
      appBar: AppBar(// 导航栏
        title: Text("Text"),
        actions: [
          IconButton(
              // 导航栏右侧菜单
              icon: Icon(Icons.share),
              onPressed: () {
                print("share");
              })
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(// 底部导航栏
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.help_center),
          ),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.lightBlue,
        onTap: (index) {
          print("selected: $index");
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
      body: IndexedStack(// 可以在一个组件上放置另一个组件，并且同时只显示一个组件
        index: _selectedIndex,
        children: [
          HomeScreen(),
          HelpCenterScreen()
        ],
      ),
    );
  }

其他容器

Container容器

是一个组合类的容器组件，不参与最终的渲染

Container(
      color: Colors.white, // 背景色
      decoration: BoxDecoration(color: Color(0xFFFFFFFF)), // 背景装饰（与color不能共存，同时只能有一个）
      width: 100,// 容器的宽度
      height: 100,// 容器的高度
      margin: EdgeInsets.only(left: 10, top: 10),
      padding: EdgeInsets.all(10),
      child: Text("Text"),
    )

SizeBox装饰类容器

可以设置具体尺寸的控件，child不为null时，如果设置宽高，则强制显示宽高，如果没有设置，则自适应；如果child为null时，可当做间隔使用

SizedBox(
      height: 16,
      child: Text("Text"),
    )

DecoratedBox装饰类容器

可以在其子组件绘制前（或者绘制后）绘制一些装饰，如背景、边框、渐变等

DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.white,// 背景色
        borderRadius: BorderRadius.all(Radius.circular(2.0)),// 圆角
        border: Border.all(color: Colors.pink, width: 1),// 边框
        gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),// 渐变
        boxShadow: [// 阴影
          BoxShadow(
              color: Colors.black12, offset: Offset(5.0, 5.0), blurRadius: 4.0)
        ],
      ), 
      child: Text("Text"),
    )

SafeArea安全区域

留出刘海和底部的安全区域，很好的解决刘海屏兼容问题

SafeArea(child: Text("Text"))

布局组件

线性布局

row

水平方向排布组件，不会自动换行

Row(
    mainAxisAlignment: MainAxisAlignment.start,// 主轴对齐方式
    crossAxisAlignment: CrossAxisAlignment.start,// 交叉轴对齐方式
      children: [
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

column

垂直方向排布组件，不会自动换行

Column(
      children: [
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

Expanded

可以使Row、Column、Flex等，子组件在其主轴上展开并填充可用空间，撑开父组件。必须使用在Row、Column、Flex等

Column(
      children: [
        Text("Text1"),
        Text("Text2"),
        Expanded(
          child: Text("Expanded"),
        ),
        Text("Text3"),
        Text("Text4"),
      ],
    )

弹性布局

Flex

如h5当中的弹性盒子布局，Row和Column都继承自Flex，参数也基本一致所以可以使用Row和Column来代替Flex

Flex(
      direction: Axis.horizontal,
      children: [
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

流式布局

Wrap、Flow

Wrap和Row类似，如果一行控件不够会自动换行
Flow和Column类似，如果一列控件不够会自动换行

Wrap(
      spacing: 8.0, // 主轴（水平）方向间距
      runSpacing: 8.0, // 纵轴（垂直）方向间距
      alignment: WrapAlignment.center, // 沿主轴方向居中
      children: [
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

层叠布局

Stack、positioned

类似绝对定位，往往与Positioned联合使用，子组件可以根据父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来（按照代码中声明的顺序）。

// 通过ConstrainedBox来确保Stack占满屏幕
ConstrainedBox(
      constraints: BoxConstraints.expand(),
      child: Stack(
        alignment: Alignment.center, // 指定未定位或部分定位widget的对齐方式
        fit: StackFit.expand, // 未定位widget占满Stack整个空间
        children: [
          Container(
              child: Text("Container"), style: TextStyle(color: Colors.white)
              color: Colors.red,),
          Positioned(
            left: 18.0,
            child: Text("left"),
          ),
          Positioned(
            top: 18.0,
            child: Text("top"),
          )
        ],
      ),
    )

相对定位

Align

Align组件可以调整子组件的位置，并且可以根据子组件的宽高来确定自身的宽高

Container(
      height: 120.0,
      width: 120.0,
      color: Colors.blue,
      child: Align(
        alignment: Alignment.topRight,
        child: Text("Text"),
      ),
    )

可滚动组件

ListView

ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型

ListView(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      padding: const EdgeInsets.all(20.0),
      children: [// 使用children只适用于组件较少的情况
        const Text("Text1"),
        const Text("Text2"),
        const Text("Text3"),
        const Text("Text4"),
        const Text("Text5"),
      ],
    )

子组件较多时使用ListView.builder

ListView.builder(
        itemCount: 100,
        itemExtent: 50.0, // 强制高度为50.0
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text("$index"),
          );
        })

GridView

GridView可以构建一个二维网格列表

GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, childAspectRatio: 1.0),
        children: [
          Icon(Icons.ac_unit),
          Icon(Icons.airport_shuttle),
          Icon(Icons.all_inclusive),
          Icon(Icons.beach_access),
          Icon(Icons.cake),
          Icon(Icons.free_breakfast)
        ])