Question

我在角4中使用flex布局模块，我在桌面模式下尝试卡布局需要显示和移动模式时应该是一个低于一个，但它不适合我PLZ建议正确的代码。

下面是我的代码：

@angular/flex-layout

使用此版本：^2.0.0-beta.9：from PyQt5.QtWidgets import QApplication, QWidget, QDesktopWidget, QGridLayout, QPushButton, QHBoxLayout, QVBoxLayout, QStackedWidget from PyQt5.QtCore import QCoreApplication class DeviceSelectionWindow(QWidget): def __init__(self, mainWindow): super().__init__() self.initUI() def initUI(self): testB = QPushButton("test",self) #------------------------------------------------------------ class ModeSelectionWindow(QWidget): def __init__(self, mainWindow): super().__init__() self.mainWindow = mainWindow self.initUI() def initUI(self): recordButton = QPushButton("Record tutorial") watchButton = QPushButton("Watch tutorial") recordButton.setFixedSize(200,100) recordButton.setStyleSheet("font-size:30px") watchButton.setFixedSize(200,100) watchButton.setStyleSheet("font-size:30px") recordButton.clicked.connect(self.mainWindow.setCurrentIndex(1)) #Add horizontal strech layout box (centered) hbox = QHBoxLayout() hbox.addWidget(recordButton) hbox.addWidget(watchButton) #Add vertical strech layout box (centered) vbox = QVBoxLayout() vbox.addLayout(hbox) self.setLayout(vbox) #------------------------------------------------------------ class MainWindow(QStackedWidget): def __init__(self, **kwargs): super().__init__(**kwargs) self.initUI() def initUI(self): self.resize(1200,600) self.centerWindow() self.setWindowTitle("MultiPov Tutorial") modeSelectionWindow = ModeSelectionWindow(self) deviceSelectionWindow = DeviceSelectionWindow(self) self.addWidget(modeSelectionWindow) self.addWidget(deviceSelectionWindow) self.show() def centerWindow(self): qr = self.frameGeometry() cp = QDesktopWidget().availableGeometry().center() qr.moveCenter(cp) self.move(qr.topLeft()) #------------------------------------------------------------ if __name__=='__main__': app = QApplication(sys.argv) mainWindow = MainWindow() sys.exit(app.exec_())

Answer 1

默认情况下，块元素放在不同的行中。您只需要处理xs屏幕的方向。

使用： -

<div fxLayout.xs="column">
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
    <h2>Card title #1</h2>
    <mat-card-content>
        <p>Some content</p>
    </mat-card-content>
</mat-card>
<mat-card fxflex fxflex-gt-xs="100" fxFlex="33.33%">
    <h2>Card title #2</h2>
    <mat-card-content>
        <p>Some content</p>
    </mat-card-content>
</mat-card>
</div>

flex布局无法正常工作

1 个答案: