Flutter学习-10

推荐文章

Flutter学习-10

Flutter的布局Widget、单子布局组件

单子布局组件

单子布局组件的含义是其只有一个子组件，可以通过设置一些属性设置该子组件所在的位置信息等。

比较常用的单子布局组件有：

Align组件
Center组件
Padding组件
Container组件

Align组件

在Flutter中Align是一个组件，具体属性如下：

const Align({
 Key key,
 this.alignment: Alignment.center, // 对齐方式，默认居中对齐
 this.widthFactor, // 宽度因子，不设置的情况，会尽可能大
 this.heightFactor, // 高度因子，不设置的情况，会尽可能大
 Widget child // 要布局的子Widget
})

示例：

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Icon(Icons.pets, size: 36, color: Colors.red),
      alignment: Alignment.bottomRight,
      widthFactor: 3,
      heightFactor: 3,
    );
  }
}

Center组件

事实上Center组件继承自Align，只是将alignment设置为Alignment.center。

class Center extends Align {
 const Center({
  Key key,
  double widthFactor,
  double heightFactor,
  Widget child
 }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

示例：

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Icon(Icons.pets, size: 36, color: Colors.red),
   widthFactor: 3,
   heightFactor: 3,
  );
 }
}

Padding组件

在Flutter中是一个Widget，外边距也可以通过padding来设置，Padding通常用于设置子Widget到父Widget的边距

const Padding({
 Key key,
 @requiredthis.padding, // EdgeInsetsGeometry类型（抽象类），使用EdgeInsets
 Widget child,
})

示例

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Padding(
   padding: EdgeInsets.all(20),
   child: Text(
    "莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
    style: TextStyle(
     color: Colors.redAccent,
     fontSize: 18
    ),
   ),
  );
 }
}

Container组件

如果需要一个视图，有一个背景颜色、图像、有固定的尺寸、需要一个边框、圆角等效果，那么就可以使用Container组件。Container在开发中被使用的频率是非常高的，特别是我们经常会将其作为容器组件。它的属性：

Container({
 this.alignment,
 this.padding, //容器内补白，属于decoration的装饰范围
 Color color, // 背景色
 Decoration decoration, // 背景装饰
 Decoration foregroundDecoration, //前景装饰
 double width,//容器的宽度
 double height, //容器的高度
 BoxConstraints constraints, //容器大小的限制条件
 this.margin,//容器外补白，不属于decoration的装饰范围
 this.transform, //变换
 this.child,
})

需要注意的是color和decoration是互斥的

示例：

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
    color: Color.fromRGBO(3, 3, 255, .5),
    width: 100,
    height: 100,
    child: Icon(Icons.pets, size: 32, color: Colors.white),
   ),
  );
 }
}

Container有一个非常重要的属性 decoration：

const BoxDecoration({
  this.color, // 颜色，会和Container中的color属性冲突
  this.image, // 背景图片
  this.border, // 边框，对应类型是Border类型，里面每一个边框使用BorderSide
  this.borderRadius, // 圆角效果
  this.boxShadow, // 阴影效果
  this.gradient, // 渐变效果
  this.backgroundBlendMode, // 背景混合
  this.shape = BoxShape.rectangle, // 形变
 })

部分效果演示：

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
//    color: Color.fromRGBO(3, 3, 255, .5),
    width: 150,
    height: 150,
    child: Icon(Icons.pets, size: 32, color: Colors.white),
    decoration: BoxDecoration(
     color: Colors.amber, // 背景颜色
     border: Border.all(
      color: Colors.redAccent,
      width: 3,
      style: BorderStyle.solid
     ), // 这里也可以使用Border.all统一设置
//      top: BorderSide(
//       color: Colors.redAccent,
//       width: 3,
//       style: BorderStyle.solid
//      ),
     borderRadius: BorderRadius.circular(20), // 这里也可以使用.only分别设置
     boxShadow: [
      BoxShadow(
       offset: Offset(5, 5),
       color: Colors.purple,
       blurRadius: 5
      )
     ],
//     shape: BoxShape.circle, // 会和borderRadius冲突
     gradient: LinearGradient(
      colors: [
       Colors.green,
       Colors.red
      ]
     )
    ),
   ),
  );
 }
}

Container+BoxDecoration实现圆角图像：

class HomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Center(
   child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
     borderRadius: BorderRadius.circular(20),
     image: DecorationImage(
      image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
     )
    ),
   ),
  );
 }
}

多子布局组件

比较常用的多子布局组件是

Flex
Row
Column
Stack

Flex组件

Flex组件和Row、Column属性主要的区别就是多一个direction。

当direction的值为Axis.horizontal的时候，则是Row。

当direction的值为Axis.vertical的时候，则是Column。

因为Row是一行排布，Column是一列排布，那么它们都存在两个方向，并且两个Widget排列的方向应该是对立的。

它们之中都有主轴（MainAxis）和交叉轴（CrossAxis）的概念：

对于Row来说，主轴（MainAxis）是X轴,交叉轴（CrossAxis）是Y轴。

对于Column来说，主轴（MainAxis）是Y轴,交叉轴（CrossAxis）是X轴。

Row组件

Row组件用于将所有的子Widget排成一行，实际上这种布局应该是借鉴于Web的Flex布局，他的源码：

Row({
 Key key,
 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, // 主轴对齐方式
 MainAxisSize mainAxisSize = MainAxisSize.max, // 水平方向尽可能大
 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, // 交叉处对齐方式
 TextDirection textDirection, // 水平方向子widget的布局顺序（默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左））
 VerticalDirection verticalDirection = VerticalDirection.down, // 表示Row纵轴（垂直）的对齐方向
 TextBaseline textBaseline, // 如果上面是baseline对齐方式，那么选择什么模式（有两种可选）
 List<Widget> children = const <Widget>[],
})

示例：

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   crossAxisAlignment: CrossAxisAlignment.end,
   mainAxisSize: MainAxisSize.max,
   children: <Widget>[
    Container(color: Colors.red, width: 60, height: 60),
    Container(color: Colors.blue, width: 80, height: 80),
    Container(color: Colors.green, width: 70, height: 70),
    Container(color: Colors.orange, width: 100, height: 100),
   ],
  );
 }
}

Expanded

如果我们希望Container Widget不要设置固定的宽度，而是占据剩余的部分，我们可以使用 Expanded 来包裹 Container Widget，并且将它的宽度不设置值；

flex属性，弹性系数，Row会根据两个Expanded的弹性系数来决定它们占据剩下空间的比例。

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   crossAxisAlignment: CrossAxisAlignment.end,
   mainAxisSize: MainAxisSize.min,
   children: <Widget>[
    Expanded(
     flex: 1,
     child: Container(color: Colors.red, height: 60),
    ),
    Container(color: Colors.blue, width: 80, height: 80),
    Container(color: Colors.green, width: 70, height: 70),
    Expanded(
     flex: 1,
     child: Container(color: Colors.orange, height: 100),
    )
   ],
  );
 }
}

Column组件

Column组件用于将所有的子Widget排成一列，Column只是和row的方向不同而已

源码:

 Column({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
 })

示例：

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Column(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   crossAxisAlignment: CrossAxisAlignment.end,
   mainAxisSize: MainAxisSize.min,
   children: <Widget>[
    Expanded(
     flex: 1,
     child: Container(color: Colors.red, width: 60),
    ),
    Container(color: Colors.blue, width: 80, height: 80),
    Container(color: Colors.green, width: 70, height: 70),
    Expanded(
     flex: 1,
     child: Container(color: Colors.orange, width: 100),
    )
   ],
  );
 }
}

Stack组件

在开发中，我们多个组件很有可能需要重叠显示，比如在一张图片上显示文字或者一个按钮等。

在Android中可以使用Frame来实现，在Web端可以使用绝对定位，在Flutter中我们需要使用层叠布局Stack。

源码：

Stack({
 Key key,
 this.alignment = AlignmentDirectional.topStart,
 this.textDirection,
 this.fit = StackFit.loose,
 this.overflow = Overflow.clip,
 List<Widget> children = const <Widget>[],
})

alignment：此参数决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。所谓部分定位，在这里**特指没有在某一个轴上定位：**left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。
textDirection：和Row、Wrap的textDirection功能一样，都用于决定alignment对齐的参考系即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左。
fit：此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小，StackFit.expand表示扩伸到Stack的大小。
overflow：此属性决定如何显示超出Stack显示空间的子widget，值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

示例：

class MyHomeBody extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Stack(
   children: <Widget>[
    Container(
     color: Colors.purple,
     width: 300,
     height: 300,
    ),
    Positioned(
     left: 20,
     top: 20,
     child: Icon(Icons.favorite, size: 50, color: Colors.white)
    ),
    Positioned(
     bottom: 20,
     right: 20,
     child: Text("你好啊，李银河", style: TextStyle(fontSize: 20, color: Colors.white)),
    )
   ],
  );
 }
}