主页 / 问题 / 999429
Accepted
Трипольский Пётр
Asked:2020-07-04 23:31:05 +0000 UTC2020-07-04 23:31:05 +0000 UTC

QML 中是否有“flexbox”的类似物？

  • 772

我正在使用 Qt 库在 C++ 中编写应用程序。选择 Qt Quick 来构建用户界面是因为它对触摸屏的良好支持。在编写程序时，出现了以下困难：

在此处输入图像描述

您能否告诉我是否有任何布局允许您按以下方式排列矩形，以便在调整窗口大小时，它们会自动调整为新的宽度/高度比？下面的布局在期望的行为上是相似的，但我根本不想将 WebView 嵌入到最终产品中。

<style>
    .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: space-around;
        background-color: aqua;
        height: 500px;
    }
    .box {
        background-color: green;
        padding: 50px;
    }
</style>
<div class="container">
  <div class="box">
      box1
  </div>
  <div class="box">
      box2
  </div>
  <div class="box">
      box3
  </div>
  <div class="box">
      box3
  </div>
  <div class="box">
      box3
  </div>
  <div class="box">
      box3
  </div>
  <div class="box">
      box3
  </div>
</div>
c++

1 个回答

  1. Best Answer

    不使用 WebView 的最简单方法是从 React Native - Yoga Layout编写绑定到 FaceBook 组件布局渲染库

    在此处输入图像描述

    创建的组件可以非常有效地绘制 flexbox。调整窗口大小时更新子元素的位置是平滑且无延迟的。

    import QtQuick 2.5
import QtQuick.Window 2.0

Window {
    visible: true
    height: 400
    width: 675
    Rectangle {
        anchors.fill: parent
        color: "cyan"
        Flex {
            height: parent.height
            width: parent.width

            flexDirection: "row"
            flexWrap: "wrap"
            justifyContent: "spaceAround"
            alignItems: "center"
            alignSelf: "center"
            alignContent: "stretch"

            Rectangle { color: "green"; height: 150; width: 150 }
            Rectangle { color: "green"; height: 150; width: 150 }
            Rectangle { color: "green"; height: 150; width: 150 }
            Rectangle { color: "green"; height: 150; width: 150 }
            Rectangle { color: "green"; height: 150; width: 150 }
            Rectangle { color: "green"; height: 150; width: 150 }
            Rectangle { color: "green"; height: 150; width: 150 }
        }
    }
}

    该解决方案的源代码已发布在相应存储库的公共域中。

    • 1

相关问题