Flutter 如何进行Flutter布局开发(1.3)

在这里插入图片描述

Container

Container参数类型说明
widthdouble宽度
heightdouble
childWidget子容器内容
alignmentAlignmentGeometryAlignmenttopLeft

Alignment.bottomRight
设置子Widget位置(这里注释很清楚,就不在过多解释了)这里有
paddingEdgeInsetsGeometry外边距
colorColor容器颜色
decorationDecoration(BoxDecoration)装饰器,通常使用BoxDecoration
marginEdgeInsetsGeometry外边距

这里主要给大家介绍一下这个BoxDecoration参数!

BoxDecoration参数类型说明
gradientGradient用来设置渐变色
类型:SweepGradient
RadialGradient
LinearGradient
colorColor设置颜色,注意:这里的Color设置的颜色不能与Container颜色重复(渐变背景会覆盖color)
borderBorderBorder.all设置所有边框
Border(top: BorderSide(color: 颜色, width: 粗细)上边框,
right: 左边框
,bottom:下边框,
left:右边框,)
borderRadiusBorderRadius圆角(此属性会把border边框属性取消掉)
boxShadowList<BoxShadow>背景阴影(可以设置多个)
imageNetworkImage用来设置网络图片,会覆盖color属性
Container(
      margin: EdgeInsets.all(50),
      decoration: BoxDecoration(
        image: DecorationImage(
            image: NetworkImage(
                "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1744362770,1889985818&fm=11&gp=0.jpg")),
          //image会覆盖color!
          color: Colors.black,
          //渐变背景 渐变色会覆盖color

          //  SweepGradient
          // RadialGradient
          // LinearGradient
          gradient: LinearGradient(
              begin: Alignment.topRight,  //LinearGradient属性
              end: Alignment.bottomLeft,  //属性
              colors: [
                Colors.blue.withOpacity(0.3),
                Colors.black.withOpacity(0.3),
                Colors.red.withOpacity(0.3),
                Colors.yellow.withOpacity(0.3),
              ]),

        // border: Border.all(
        //   color: Colors.red,
        //   width: 3,
        // ),
          //边框 borderRadius圆角 属性会取消掉这个
        border: Border(
            top: BorderSide(color: Colors.blue, width: 3), // 上边边框
            right: BorderSide(color: Colors.red, width: 4), // 右侧边框
            bottom: BorderSide(color: Colors.yellow, width: 5), // 底部边框
            left: BorderSide(color: Colors.cyan, width: 6)), // 左侧边框

        //圆角  圆角属性会把边框取消掉!!
        borderRadius: BorderRadius.all(Radius.circular(200)),
          boxShadow: [
            BoxShadow( // 设置第一个阴影效果
                color: Colors.green, // 阴影颜色为绿色
                offset: Offset(-20, -20),//设置偏移
                blurRadius: 10, // 模糊半径为10
                spreadRadius: 10), // 延伸半径为10
            BoxShadow( // 增加第二个阴影
                color: Colors.yellow, // 阴影颜色为黄色
                offset: Offset(10, 10), // 右下方偏移10
                blurRadius: 20,
                spreadRadius: 20),
          ]
      ),
    );

效果图:
在这里插入图片描述

RendderObjectWidget

SingleChildRenderObjectWidget(单节点)

Opacity

透明度组件

Opacity参数类型说明
opacitydouble最大值1,最小值0用来设置透明度
childWidget设置子Widget
alwaysIncludeSemanticsbool(我还没看出有什么效果)
 Opacity(
            opacity: 0.8,
            alwaysIncludeSemantics: false,
            child: Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 100,height: 150,),
          )

效果图:
在这里插入图片描述

ClipOval

圆角组件

ClipOval参数类型说明
clipBehaviorClipClip.none不设置圆角(注释很清晰,还有很多,可以分别试一下)在这里插入图片描述
childWidget子Widget组件
  ClipOval(
//            clipBehavior: Clip.none,//不设置圆角
            child: Image.network(
              "http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",
              width: 100,
              height: 150,
            )

效果图:
在这里插入图片描述

ClipRRect

矩形组件

ClipRRect参数类型说明
borderRadiusBorderRadius设置圆角
childWidget子Widget
 ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            child: Image.network(
              "http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",
              width: 100,
              height: 150,
            ),
          )

效果图:
在这里插入图片描述

PhysicalModel

设置组件变换类型控件

注:加粗的是必加参数:

PhysicalModel参数类型说明
borderRadiusBorderRadius设置圆角
clipBehaviorClip比价参数抗锯齿Clip.antiAlias
shapeBoxShapeBoxShape.circle设置圆角
默认是BoxShape.rectangle
elevationdouble设置阴影
colorColor必加参数一般设置为透明Colors.transparent
shadowColorColor阴影颜色
childWidget子Widget

直接上代码(拿改变PageView举例)

Container(
              height: 200,
              margin: EdgeInsets.all(30),
              alignment: Alignment.center,
              child:PhysicalModel(
                borderRadius: BorderRadius.circular(20),
                clipBehavior: Clip.antiAlias, //设置抗锯齿 这个必须加!!
                shape: BoxShape.circle,//设置圆角
                elevation: 20,
                color: Colors.transparent,
                shadowColor: Colors.greenAccent,//阴影颜色
                child:  PageView(
                  children: <Widget>[
                    initPageViewItem("Page1", Colors.white),
                    initPageViewItem("Page2", Colors.yellow),
                    initPageViewItem("Page3", Colors.red),
                  ],
                ),
              )
            )

效果图:

在这里插入图片描述

Align Center

居中控件

Center继承自Align,他只是隐藏了alignment.center属性,可能会觉得很没用,但确实如此(这些控件都很简单,就不在墨迹啦)

Center(
      child: Text("居中了??"),
     )

效果图:
在这里插入图片描述

Padding

内边距组件

Padding(
              padding: EdgeInsets.only(left: 60),
              child: Text("我已经向左移动了"),
            )

效果图:
在这里插入图片描述

SizedBox

控制容器大小组件

这个组件我现在还没发现他的优势之处,甚至感觉有点多余…就三个参数width,height,child.

 SizedBox(
              width: 100,
              height: 100,
              child: Container(
                padding: EdgeInsets.only(top: 30),
                color: Colors.green,
              ),
            )

在这里插入图片描述

FractionallySizedBox

宽度占满组件

FractionallySizedBox参数类型说明
alignmentAlignmentGeometry居中方式(没什么用,因为要占满屏幕宽度)
widthFactordouble最大值1,最小值0,设置宽度比例
childWidget子Widget
heightFactordouble没用
  FractionallySizedBox(
                  widthFactor: 0.9,
                  child: Container(
                    padding: EdgeInsets.only(top: 30),
                    alignment: Alignment.center,
                    color: Colors.yellow,
                    child: Text("FractionallySizedBox",style: TextStyle(fontSize: 10),),
                  ),
                )

效果图:
在这里插入图片描述

MultChildRenderObjectWidget(多节点)

Stack与Positioned配合使用

相当于Android中Fragment

Stack参数类型说明
fitStackFit我没看到具体效果
overflowOverflow我没看到具体效果
textDirectionTextDirection我没看到具体效果
childrenList<Widget>设置子Widget
alignmentAlignmentGeometryWidget位置
Positioned参数类型说明
leftdouble距离左边位置
topdouble距离上边位置
rightdouble距离右边位置
bottomdouble距离下边位置
widthdouble
heightdouble
Stack(
                  fit: StackFit.passthrough,//我没看出效果
                  overflow: Overflow.clip,//我没看出效果
                  textDirection: TextDirection.ltr,//我没看出效果
                  alignment: Alignment.topRight,//我没看出效果
                  children: <Widget>[
                    Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 100,height: 150,),
                    Positioned(
                      left: 0,
                      top: 0,
                      child: Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 20,height: 30,),
                    )
                  ],
                )

效果图:
在这里插入图片描述

Row

相当于Android中LinearLayout垂直方向布局

Row参数类型说明
crossAxisAlignmentCrossAxisAlignmentCrossAxisAlignment.start:子组件在 Row 中顶部对齐。
CrossAxisAlignment.end:子组件在 Row 中底部对齐。
CrossAxisAlignment.center:子组件在 Row 中居中对齐。
CrossAxisAlignment.stretch:拉伸填充满父布局。
CrossAxisAlignment.baseline:在 Row 组件中会报错。
mainAxisAlignmentMainAxisAlignmentMainAxisAlignment.start:靠左排列。
MainAxisAlignment.end:靠右排列。
MainAxisAlignment.center:居中排列。
MainAxisAlignment.spaceAround:每个子组件左右间隔相等,也就是 margin 相等。
MainAxisAlignment.spaceBetween:两端对齐,也就是第一个子组件靠左,最后一个子组件靠右,剩余组件在中间平均分散排列。
MainAxisAlignment.spaceEvenly:每个子组件平均分散排列,也就是宽度相等。
mainAxisSizeMainAxisSizeMainAxisSize.max:相当于 Android 的 match_parent。
MainAxisSize.min:相当于 Android 的 wrap_content。
textDirectionTextDirectionTextDirection.rtl从右往左排列
TextDirection.ltr从左往右排列,默认是从左往右
verticalDirectionVerticalDirectionVerticalDirection.up:Row 从下至上开始摆放子组件,此时我们看到的底部其实是顶部。
VerticalDirection.down:Row 从上至下开始摆放子组件,此时我们看到的顶部就是顶部。
childrenList<Widget>子Widget

这里代码太多了,就不粘贴了,等最后查看完整代码吧:

效果图:
在这里插入图片描述

Column

相当于Android中LinearLayout水平方向布局

属性和Row完全一样,不一样的只是一个是水平,一个是垂直,这里就不在写重复代码了.

在这里插入图片描述

Wrap

相当于Android中LinearLayout垂直方向布局,区别于Row是Wrap会自动换行

Wrap参数类型说明
directionAxis排列方式默认Axis.horizontal水平排列
Axis.vertical垂直排列
alignmentWrapAlignment对齐方式(自己去看)在这里插入图片描述
spacingdouble左右间距
runSpacingdouble上下间距
runAlignmentWrapAlignment上下对齐方式
textDirectionTextDirectionTextDirection.rtl从右往左排列
TextDirection.ltr从左往右排列,默认是从左往右
childrenWidget子Widget
verticalDirectionVerticalDirectionVerticalDirection.up从下往上排列
VerticalDirection.down从上往下排列
默认是从上往下排列
 Container(
                     child: Wrap(
                       direction: Axis.horizontal,//排列方式
                       alignment: WrapAlignment.end,//对齐方式
                       spacing: 5, //间距
                       runSpacing: 20, //上下间距
                       runAlignment: WrapAlignment.spaceBetween,
                       textDirection: TextDirection.rtl,
                       verticalDirection: VerticalDirection.down,
                       children: <Widget>[
                         initChipItem("Flutter"),
                         initChipItem("Java"),
                         initChipItem("C++"),
                         initChipItem("Java"),
                         initChipItem("Flutter"),
                         initChipItem("C#"),
                         initChipItem("PHP"),
                         initChipItem("HTML"),
                         initChipItem("Flutter"),
                         initChipItem("Java"),
                         initChipItem("Pathon"),
                         initChipItem("Flutter"),
                         initChipItem("switch"),
                       ],
                     ),
                   )

initChipItem(String lable) {
  return Chip(
    label: Text(lable),
    avatar: CircleAvatar(
      backgroundColor: Colors.black87,
      child: Text(lable.substring(0, 1)),
    ), //圆形头像
  );
}

注:使用Chip需要使用Scaffold包裹!
来看看效果吧:

在这里插入图片描述

ParentDataWidget

Positioned

用于固定Widget位置,常配合Stack使用

Flexible Expanded

展开,常用于占满父容器垂直高度

没什么难度,代码也一行,直接上代码了

Expanded(
                  child: Container(
                    color: Colors.red,
                  ),
                )

在这里插入图片描述
点击查看完整代码.

上一章:Flutter StatefluWidget与基础组件(1.2)

下一章:Flutter 如何创建Flutter路由与导航(1.4)

哇,终于写完了,写了整整2天的博客,修修补补才完成3篇,好累好嘞,您的点赞就是我的动力,吧赞留下吧~~~

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页