flutter布局组件

最新推荐文章于 2024-03-28 18:25:11 发布

Tangsze

最新推荐文章于 2024-03-28 18:25:11 发布

阅读量275

点赞数

分类专栏： flutter 前端文章标签： flutter 前端

本文链接：https://blog.csdn.net/Mytechnologe_2417/article/details/103271266

版权

前端同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

flutter

9 篇文章 0 订阅

订阅专栏

Align组件

Align组件用于将它的子组件放置到确定的位置，比如下面的代码展示了将Text组件放置到100*100的容器的右下角：

new Container(
  width: 100.0,
  height: 100.0,
  color: Colors.red,
  child: new Align(
    child: new Text("hello"),
    alignment: Alignment.bottomRight,
  ),)
  /// The top left corner.
  static const Alignment topLeft = const Alignment(-1.0, -1.0);

  /// The center point along the top edge.
  static const Alignment topCenter = const Alignment(0.0, -1.0);

  /// The top right corner.
  static const Alignment topRight = const Alignment(1.0, -1.0);

  /// The center point along the left edge.
  static const Alignment centerLeft = const Alignment(-1.0, 0.0);

  /// The center point, both horizontally and vertically.
  static const Alignment center = const Alignment(0.0, 0.0);

  /// The center point along the right edge.
  static const Alignment centerRight = const Alignment(1.0, 0.0);

  /// The bottom left corner.
  static const Alignment bottomLeft = const Alignment(-1.0, 1.0);

  /// The center point along the bottom edge.
  static const Alignment bottomCenter = const Alignment(0.0, 1.0);
  /// The bottom right corner.
  static const Alignment bottomRight = const Alignment(1.0, 1.0);

FittedBox组件

new Container(
  width: 200.0,
  height: 100.0,
  color: Colors.red,
  child: new FittedBox(
    child: new Text("hello world"),
    fit: BoxFit.fill,
  ))

ConstrainedBox组件

ConstrainedBox组件用于给它的子组件强制加上一些约束，

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Test",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test")
        ),
        body: new ConstrainedBox(
          constraints: const BoxConstraints.expand(width: 50.0, height: 50.0),
          child: new Container(
            color: Colors.red,
            width: 200.0,
            height: 200.0,
          )
        )
      ),
    );
  }}

IntrinsicWidth & IntrinsicHeight

这两个组件的作用是将他们的子组件调整到组件本身的宽度/高度。
这个类是非常有用的，例如，当宽度/高度没有任何限制时，你会希望子组件按更合理的宽度/高度显示而不是无限的扩展。

LimitedBox组件

LimitedBox是一个当其自身不受约束时才限制其大小的容器。
如果这个组件的最大宽度是没有约束，那么它的宽度就限制在maxWidth。类似地，如果这个组件的最大高度没有约束，那么它的高度就限制在maxHeight。

Offstage组件

Offstage组件用于显示或隐藏它的子组件，

new Offstage(
  offstage: false, // true: 隐藏， false: 显示
  child: new Text("hello world"),)

OverflowBox & SizedOverflowBox

OverflowBox组件它给它的子组件带来不同的约束，而不是从它的父组件中得到，可能允许子组件溢出到父组件中。

SizedOverflowBox组件是一个指定大小的组件，它的约束会传递给子组件，子组件可能溢出。

SizedBox组件

SizedBox是一个指定了大小的容器。

如果指定了SizedBox的大小，则子组件会使用SizedBox的大小，如果没有指定SizedBox的大小，则SizedBox会使用子组件的大小。如果SizedBox没有子组件，SizedBox会按它自己的大小来显示，将nulls当作0。

new SizedBox(
  // 如果指定width和height，则Container按照指定的大小显示，而不是Container自己的大小，如果没有指定width和height，则SizedBox按照Container的大小显示
  width: 50.0,
  height: 50.0,
  child: new Container(
    color: Colors.red,
    width: 300.0,
    height: 300.0,
  ),
)

Transform组件

Transform用于在绘制子组件前对子组件进行某些变换操作，比如平移、旋转、缩放等。

示例代码如下：

new Container(
  color: Colors.black,
  child: new Transform(
    alignment: Alignment.topRight,
    // 需要导包：import 'dart:math' as math;
    transform: new Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
    child: new Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFFE8581C),
      child: const Text('Apartment for rent!'),
    ),
  ),
)

在这里插入图片描述

包含多个子Widget的布局容器

Row组件

Row组件字面理解就是代表一行，在一行中可以放入多个子组件。

下面是示例代码：

import 'package:flutter/material.dart';

main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Test",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test")
        ),
        body: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text("hello"),
            new Container(
              width: 50.0,
              height: 50.0,
              color: Colors.red,
            ),
            new Text("world")
          ],
        )
      ),
    );
  }
}

在这里插入图片描述
Row组件的构造方法中，children参数是一个数组，表示可以有多个子组件，mainAxisAlignment表示Row中的子组件在主轴(Row组件主轴表示水平方向，交叉轴表示垂直方向，Column组件主轴表示垂直方向，交叉轴表示水平方向)上的对齐方式，可以有如下几个取值：

MainAxisAlignment.start
MainAxisAlignment.center
MainAxisAlignment.end
MainAxisAlignment.spaceBetween
MainAxisAlignment.spaceAround
MainAxisAlignment.spaceEvenly

Column组件

Column组件表示一列，可以在一列中放入多个组件，如下代码所示：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Test",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test")
        ),
        body: new Column(
          children: <Widget>[
            new Text("hello"),
            new Text("world"),
            new Text("nihao~")
          ],
        )
      ),
    );
  }
}

Column和Row组件一样，可以通过MainAxisAlignment或者CrossAxisAlignment来设置主轴和交叉轴的对齐方式，这里不再赘述。

Stack组件

Stack组件类似于Android中的FrameLayout，其中的子组件是一层层堆起来的，并不像Row或者Column中的子组件，按水平或垂直方向排列，下面用代码说明

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Test",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test")
        ),
        body: new Stack(
          children: <Widget>[
            new Container(
              width: 100.0,
              height: 100.0,
              color: Colors.red,
            ),
            new Container(
              width: 30.0,
              height: 30.0,
              color: Colors.green,
            )
          ],
        )
      ),
    );
  }
}

在上面的Stack组件中，放入了两个Container，其中第一个Container是100x100大小，第二个Container是30x30大小，在模拟器上运行效果如下图：
在这里插入图片描述

IndexedStack组件

IndexedStack用于根据索引来显示子组件，index为0则显示第一个子组件，index为1则显示第二个子组件，以此类推，下面用代码说明：

new IndexedStack(
  index: 1,
  children: <Widget>[
    new Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
      child: new Center(
        child: new Text("index: 0", style: new TextStyle(fontSize: 20.0),),
      ),
    ),
    new Container(
      width: 100.0,
      height: 100.0,
      color: Colors.green,
      child: new Center(
        child: new Text("index: 1", style: new TextStyle(fontSize: 20.0),),
      ),
    )
  ],
)

IndexedStack的构造方法中有个index属性，上面的index属性为1，则显示的是children数组中的第2个元素（绿色方块），如果index改为0，则显示的是第1个元素（红色方块），如果index的大小超过了children数组的长度，则会报错。

Table组件

Table组件用于显示多行多列的布局，如果只有一行或者一列，使用Row或者Column更高效。下面用一段代码展示Table的用法：

class MyApp extends StatelessWidget {

  // 生成Table中的数据
  List<TableRow> getData() {
    var data = [
      "hello",
      "world"
    ];
    List<TableRow> result = new List<TableRow>();
    TextStyle style = new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold);
    for (int i = 0; i < data.length; i++) {
      String str = data[i];
      List<Widget> row = new List();
      for (int j = 0; j < str.length; j++) {
        row.add(new Text(" ${str[j]} ", style: style));
      }
      result.add(new TableRow(
        children: row
      ));
    }
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Test",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test")
        ),
        body: new Table(
          children: getData()
        )
      ),
    );
  }
}

在这里插入图片描述

Wrap组件

Wrap组件可以在水平或垂直方向上多行显示其子组件，下面是示例代码：

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Test",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Test")
        ),
        body: new Wrap(
          spacing: 5.0, // 水平方向上两个子组件的间距
          runSpacing: 20.0, // 两行的垂直间距
          children: <Widget>[
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
            new Text("hello"),
          ],
        )
      ),
    );
  }
}

在这里插入图片描述
如果你把上面代码中的Wrap换成Row，你会发现Row中的子组件超过屏幕宽度后，不会自动换行显示。

Tangsze

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flutter布局组件

Align组件Align组件用于将它的子组件放置到确定的位置，比如下面的代码展示了将Text组件放置到100*100的容器的右下角：new Container( width: 100.0, height: 100.0, color: Colors.red, child: new Align( child: new Text("hello"), alignment...
复制链接

扫一扫