欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)

程序员文章站 2022-05-23 11:06:47
上一篇梳理了拥有单个子元素布局的Widget,今天来梳理一下拥有多个子元素布局的Widget。 Row Row组件常见属性如下: mainAxisAlignment:主轴的排列方式 crossAxisAlignment:次轴的排列方式 mainAxisSize:... ......

如需转载,请注明出处:flutter学习笔记(23)--多个子元素的布局widget(rwo、column、stack、indexedstack、table、wrap)

 

上一篇梳理了拥有单个子元素布局的widget,今天来梳理一下拥有多个子元素布局的widget。

  • row

row组件常见属性如下:

mainaxisalignment:主轴的排列方式

crossaxisalignment:次轴的排列方式

mainaxissize:主轴应该占据多少空间,取值max为最大,min为最小

children:组件子元素,它的本质是一个list列表

对于row来说,水平方向是主轴,垂直方向是次轴。

首先来看一下mainaxisalignment属性值都有哪些

enum mainaxisalignment {
  start,//将子控件放在主轴开始的位置
  end,//将子控件放在主轴结束的位置
  center,//将子控件放在主轴中间的位置
  spacebetween,//将主轴空白位置进行均分,排列子元素,首尾没有空隙
  spacearound,//将主轴空白区域均分,使中间各个子控件间距相等,首尾子控件间距为中间子控件间距的一半
  spaceevenly,//将主轴空白区域均分,使各个子空间间距相等
}

demo示例:

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'children demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new row(
          mainaxisalignment: mainaxisalignment.spacearound,
          children: <widget>[
            new text('11111111111'),
            new text('22222222222'),
            new text('33333333333')
          ],
        ),
      ),
    );
  }
}

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)

  • column

column组件常见属性如下:

mainaxisalignment:主轴的排列方式

crossaxisalignment:次轴的排列方式

mainaxissize:主轴应该占据多少空间,取值max为最大,min为最小

children:组件子元素,它的本质是一个list列表

对column来说,垂直方向是主轴,水平方向是次轴,使用上和row大同小异

demo示例:

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'children demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new column(
          mainaxisalignment: mainaxisalignment.spacearound,
          children: <widget>[
            new text('11111111111'),
            new text('22222222222'),
            new text('33333333333')
          ],
        ),
      ),
    );
  }
}

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)

  • stack

stack/alignment:

stack组件的每一个子组件要么定位,要么不定位,定位的子组件是用positioned组件包裹的,stack组件本身包含所有不定位的子组件,子组件根据alignment属性定位(默认为左上角)。然后根据定位的子组件的top、right、bottom、left属性将他们放置在stack组件上。

stack既然是允许子元素堆叠的组件,那么定位堆叠位置的属性值有哪些呢?

alignment属性值:bottomcenter 底部中间位置、bottomleft 底部左侧位置、bottomright 底部右侧位置、center 正中间位置、centerleft 中间居左位置、centerright 中间居右位置、topcenter 上部居中位置、topleft 上部居左位置、topright 上部居右位置

demo示例:

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'children demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new center(
          child: new stack(
            alignment: alignment.centerleft,
            children: <widget>[
              new container(
                width: 200.0,
                height: 200.0,
                color: colors.blue,
              ),
              new text('这是一段文本')
            ],
          ),
        ),
      ),
    );
  }
}

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)

stack/positioned:

上面的示例是通过系统提供的定位来给子元素进行堆叠,但是实际工作中,上面的几类属性值往往不能满足我们ui的需求,ui可能会要求子元素放在任何你想不到的位置,那么这时候就需要用到我们positioned来进行定位了。

positioned属性值:top 子元素相对顶部边界距离,left 子元素相对左侧边界距离,right 子元素相对右侧边界距离,bottom 子元素相对底部边界距离。

demo示例:

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'children demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new center(
          child: new stack(
            children: <widget>[
              new container(
                width: 200.0,
                height: 200.0,
                color: colors.blue,
              ),
              new positioned(
                top: 20.0,
                left: 50.0,
                child: new text('这是一段文本')
              )
            ],
          ),
        ),
      ),
    );
  }
}

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)

  • indexedstack

indexedstack继承自stack,它的作用是显示第index个child,其他的child都是不可见的,所以indexedstack的尺寸永远是和最大的子节点尺寸一致。由于indexedstack是继承自stack,所以它只比stack多了一个index属性,即对应child的索引。

demo示例:

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'children demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new center(
          child: new indexedstack(
            index: 1,
            children: <widget>[
              new container(
                width: 200.0,
                height: 200.0,
                color: colors.blue,
              ),
              new positioned(
                top: 20.0,
                left: 50.0,
                child: new text('这是一段文本')
              )
            ],
          ),
        ),
      ),
    );
  }
}

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)

  • table

table表格布局,每一行的高度由其内容决定,每一列的宽度由columnwidths属性单独控制。

table组件常见属性如下:

columnwidths:设置每一列的宽度。

defaultcolumnwidth:默认的每一列宽度,默认情况下均分。

textdirection:文字方向。

border:表格边框。

defaultverticalalignment:默认垂直方向的对齐方式,top 放置在顶部、middle 垂直居中、bottom 放置在底部、baseline 文本baseline对齐、fill 充满整个cell

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'children demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new table(
          defaultverticalalignment: tablecellverticalalignment.bottom,
          // 设置表格有多少列,并且指定列宽
          columnwidths:const <int,tablecolumnwidth> {
            0:fixedcolumnwidth(40.0),
            1:fixedcolumnwidth(40.0),
            2:fixedcolumnwidth(60.0),
            3:fixedcolumnwidth(60.0),
            4:fixedcolumnwidth(130.0),
          },
          // 设置表格边框样式
          border: tableborder.all(
            color: colors.blue,
            width: 2.0,
            style: borderstyle.solid
          ),
          children: const <tablerow>[
            // 添加第一行数据
            tablerow(
              children: <widget>[
                sizedbox(
                  child: text('姓名'),
                  height: 30,
                ),
                text('性别'),
                text('年龄'),
                text('身高'),
                text('备注'),
              ],
            ),
            // 添加第二行数据
            tablerow(
              children: <widget>[
                text('张三'),
                text('男'),
                text('20'),
                text('186'),
                text('学渣'),
              ],
            ),
            // 添加第三行数据
            tablerow(
              children: <widget>[
                text('李四'),
                text('男'),
                text('20'),
                text('188'),
                text('学酥'),
              ],
            ),
            // 添加第四行数据
            tablerow(
              children: <widget>[
                text('王五'),
                text('男'),
                text('21'),
                text('177'),
                text('学霸'),
              ],
            ),
            // 添加第五行数据
            tablerow(
              children: <widget>[
                text('小梅'),
                text('女'),
                text('22'),
                text('170'),
                text('学神,需要重点培养'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)

  • wrap

import 'package:flutter/material.dart';

void main() => runapp(demoapp());

class demoapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return new materialapp(
      title: 'children demo',
      home: new scaffold(
        appbar: appbar(
          title: new text('children demo'),
        ),
        body: new wrap(
          spacing: 3.0,
          runspacing: 20.0,//纵轴方向的间距
          alignment: wrapalignment.end,//纵轴方向的对其方式
          children: <widget>[
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('a'),
              ),
              label: new text('文本一'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('b'),
              ),
              label: new text('文本二'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('c'),
              ),
              label: new text('文本三'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('d'),
              ),
              label: new text('文本四'),
            ),
            new chip(
              avatar: circleavatar(
                backgroundcolor: colors.blue,
                child: new text('e'),
              ),
              label: new text('文本五'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)