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

用于記錄我的學習，持續(xù)更新

• Container

官方解釋：一個擁有繪制、定位、調(diào)整大小的 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 //陰影擴散 正數(shù)就擴散，負數(shù)就縮小，默認是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回調(diào)
    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回調(diào)
    @required IndexedWidgetBuilder itemBuilder, 
    int itemCount,
    this.dragStartBehavior = DragStartBehavior.start,
  })

//    PageController controller, 
PageController({
    this.initialPage = 0, //初始化時候得下標
    this.keepPage = true, //用于保存滾動偏移量的位置
    this.viewportFraction = 1.0, //視圖填充大小
  })