Flutter自定义布局排列：单个子View

皮皮高

于 2020-12-13 12:41:06 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/qq_16009381/article/details/111100218

Flutter 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的自定义居中布局方案，通过创建一个名为 CenterLayout 的 Widget 实现了子 View 在父容器中的居中显示效果。此外，还展示了如何在 Flutter 中使用此组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单例子：该例子实现了子View居中对齐效果

class CenterLayout extends SingleChildRenderObjectWidget {

  CenterLayout({
    Key key,
    Widget child
  }): super(key: key , child: child);

  @override
  RenderObject createRenderObject(BuildContext context) => RenderLayout();

}

class RenderLayout extends RenderShiftedBox {

  RenderLayout({RenderBox child}) : super(child);

  @override
  void performLayout() {
    child.layout(BoxConstraints(
        minHeight: 0.0,
        //maxHeight: null,
        minWidth: 0.0,
        //maxWidth: null,
    ), parentUsesSize: true);
    final BoxParentData childParentData = child.parentData;
    //控制子View坐标，（0，0）是屏幕左上角
    childParentData.offset = Offset((size.width - child.size.width) / 2, (size.height - child.size.height) / 2);
    size = Size(this.constraints.maxWidth, constraints.maxHeight);
  }

}

使用：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: Container(
        child: CenterLayout(
          child: Text(
              "我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我"
          ),
        ),
      ),
    );
  }