Flutter基础

u=653666270,723497068&fm=26&gp=0.jpg

用于记录我的学习，持续更新

---

• Container

官方解释：一个拥有绘制、定位、调整大小的 widget。

image.png

这是比较常用的一个基础组件,我这里就记录一下decoration(装饰盒子)这个属性，下面是BoxDecoration:

const BoxDecoration({
    this.color,   //背景颜色
    this.image, //背景图片
    this.border, //边框
    this.borderRadius, //圆角
    this.boxShadow, //阴影
    this.gradient, //渐变
    this.backgroundBlendMode, //混合模式
    this.shape = BoxShape.rectangle, //形状
  })

gradient 有两种渐变 RadialGradient和LinearGradient

//可以设置渐变的开始位置跟结束位置
const LinearGradient({
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    @required List<Color> colors,
    List<double> stops,
    this.tileMode = TileMode.clamp,
  })

//由中心扩散 可以设置扩散位置，扩散范围的大小
const RadialGradient({
    this.center = Alignment.center,
    this.radius = 0.5,
    @required List<Color> colors,
    List<double> stops,
    this.tileMode = TileMode.clamp,
    this.focal,
    this.focalRadius = 0.0,
  })

LinearGradient下图

image.png

RadialGradient下图

image.png

这下面是设置的代码

decoration: BoxDecoration(
          color: Colors.yellow, //背景颜色
          border: Border.all( //边框
            color: Colors.red,
            width: 3
        ),
         borderRadius: BorderRadius.circular(10), //设置圆角
//            borderRadius: BorderRadius.only(topLeft: Radius.circular(20)), //设置圆角
          boxShadow: [ //阴影
            BoxShadow(
                offset: Offset(10, 10), //阴影偏移
                color: Colors.red, //阴影颜色
                blurRadius: 20, //阴影模糊程度,值越大越模糊 默认0
                spreadRadius: 3 //阴影扩散 正数就扩散，负数就缩小，默认是0
            )
          ],
          shape: BoxShape.rectangle, //形状 可设置矩形，原型,是一个枚举值
          gradient: RadialGradient(  //径向渐变
            colors: [
              Colors.blue,
              Colors.cyanAccent
            ],
            radius: 0.5
          ),
//            gradient: LinearGradient( //线性渐变
//                colors: [
//                  Colors.blue,
//                  Colors.cyanAccent
//                ],
//              begin: Alignment.topLeft,
//              end: Alignment.bottomRight
//            )
       ),

---

• 排列

Row:在水平方向上排列子widget的列表
Column:在垂直方向上排列子widget的列表。

这个排列不多说，主要想记录一下主轴，交叉轴

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      height: 667,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconBadge(Icons.add_comment),
          IconBadge(Icons.add_a_photo),
          IconBadge(Icons.add_call)
        ],
      ),
    );
  }
}

image.png

在Row排列中,主轴就是红色箭头 从左往右，交叉轴就是绿色箭头，从上往下
在Column排列中,主轴就是绿色箭头 ，从上往下，交叉轴就是红色箭头，从左往右
交叉轴就是与主轴垂直的那条线

---

• PageView

分页滚动的一个视图

PageView({
    Key key,
    this.scrollDirection = Axis.horizontal, //滚动方向
    this.reverse = false, //是否反向，从最后一个开始
    PageController controller,
    this.physics,
    this.pageSnapping = true, //是否分页滑动
    this.onPageChanged,  //当前index回调
    List<Widget> children = const <Widget>[],
    this.dragStartBehavior = DragStartBehavior.start,
  })

PageView.builder({
    Key key,
    this.scrollDirection = Axis.horizontal, //滚动方向
    this.reverse = false, //是否反向，从最后一个开始
    PageController controller, 
    this.physics, 
    this.pageSnapping = true, //是否分页滑动
    this.onPageChanged, //当前index回调
    @required IndexedWidgetBuilder itemBuilder, 
    int itemCount,
    this.dragStartBehavior = DragStartBehavior.start,
  })

//    PageController controller, 
PageController({
    this.initialPage = 0, //初始化时候得下标
    this.keepPage = true, //用于保存滚动偏移量的位置
    this.viewportFraction = 1.0, //视图填充大小
  })