Flutter初学 —— 常用控件使用

在编写几个Flutter项目后，发现Flutter的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案；而Dart语言也与Java、Kotlin类似，所以对 Android开发者来说门槛非常低；特意记录一下常用的控件及其使用：

StatelessWidget 与 StatefulWidget

StatelessWidget不需要额外的创建State
StatefulWidget创建State类，并可以在其中保存一些状态

Padding

padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top)

padding: EdgeInsets.all()

padding: :EdgeInsets.symmetric()

only 可以单独设置每个方向的内边距

SizedBox

SizedBox(width:10, height:10)

Column

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children:
)

类似于LinearLayout中的orientation设置为vertical，mainAxisAlignment表示竖向的一个对齐方式，crossAxisAlignment表示横向的对齐方式

Row

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children:
)

与Column相反，主轴是横向，对齐方式类似，crossAxisAlignment表示竖向的对齐方式

Container

类似 SizedBox，一个容器，但是主要功能是有一个decoration—— 装饰器，作用是绘制背景，或者使用item中的阴影

Container(
  decoration: BoxDecoration(
  borderRadius: const BorderRadius.all(Radius.circular(16.0),),
  boxShadow: [
    BoxShadow(
        color: Colors.grey.withOpacity(0.6),
        offset: const Offset(4, 4),
        blurRadius: 16,
      ),
    ],
),

Stack

栈，先入后出，类似于Android上的FrameLayout

Positioned

通常配合Stack使用，固定显示在某一个位置

Expanded

配合多child使用，会填充剩余的空间

Image

Image 功能强大，使用不同的方法可以加载不同来源的图片

Image.asset

Image.file

Image.network

Image.memory

看到这些方法，突然觉得Flutter太香了，而且Image可以配置clip等裁剪出不同形状的图片，无论是圆形还是五角星都不在话下，然而Android要实现不规则的形状，可是要下不少功夫的。

ListView

名字和Android的一模一样，但是用法却比Android的简单很多：

ListView.builder(
                          itemCount: hotelList.length,
                          padding: const EdgeInsets.only(top: 8),
                          scrollDirection: Axis.vertical,
                          itemBuilder: (BuildContext context, int index) {
}

主要就是itemCount与itemBuilder,其余就是配置样式，itemBuilder 需要返回一个widget，当然了，每个ListView都有其对应的item，在里面的方法中编写widget即可

GridView

与ListView类似，但是需要有一个delegate类，作用是设置有多少列，每一列之间的间距是多少

GridView(
                            padding: const EdgeInsets.only(top: 0, left: 12, right: 12),
                            physics: const BouncingScrollPhysics(),
                            scrollDirection: Axis.vertical,
                            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: multiple ? 2 : 1,
                              mainAxisSpacing: 12.0,
                              crossAxisSpacing: 12.0,
                              childAspectRatio: 1.5,
                            ),
                          children:

GridView没有build，children表示所有的子view

TextFiled

最常用的控件之一，有非常多的样式，Flutter中通常是使用装饰器来处理控件的，如背景使用BoxDecoration, TextFiled使用InputDecoration ; 使用如下

child: TextFormField(
  style: const TextStyle(
    fontFamily: "WorkSans",
    fontWeight: FontWeight.bold,
    fontSize: 16,
    color: DesignCourseAppTheme.nearlyBlue,
  ),
  keyboardType: TextInputType.text,
  decoration: InputDecoration(
    labelText: "Search for course",
    border: InputBorder.none,
    helperStyle: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 16,
      color: HexColor("#B9BABC"),
    ),
    labelStyle: TextStyle(
      fontWeight: FontWeight.w600,
      fontSize: 16,
      letterSpacing: 0.2,
      color: HexColor("#B9BABC"),
    ),
  ),
  onEditingComplete: () {},
),

Flexible

AnimatedOpacity