Question

如果设备的屏幕宽度超过某个阈值，如何将“列”窗口小部件动态更改为“行”窗口小部件？

用例是当用户在平板电脑或横向模式下使用该应用程序时，布局应有所不同，以优化可用宽度的使用。

在CSS flexbox中，这就像将类从flex-row更改为flex-column一样简单，但是在Flutter中，使用了小部件。

Answer 1

//check if its already been assigned to anybody else inspectorsDB.on('child_added', snapshot => { snapshot.forEach(function (childSnapshot) { if (snapshot.child("0/DistrictCode").val() === districtCode) { var key = childSnapshot.key; var childData = childSnapshot.val(); console.log(key) console.log(childData) } }) })和Row共享一个公用的父对象Column，它沿轴方向。只需更改Flex的值，即可将direction更改为行或列。

要获取屏幕宽度，可以使用Flex。

您的窗口小部件应如下所示：

MediaQuery.of(context).size.width

Answer 2

要基于设备方向进行更改，您可以执行以下操作：

Orientation orientation = MediaQuery.of(context).orientation;

return orientation == Orientation.portrait
? Column(children: <Widget>[])
: Row(children: <Widget>[]);

我写了一个助手来做到这一点（从列到行）。

import 'package:flutter/material.dart';

class OrientationSwitcher extends StatelessWidget {
  final List<Widget> children;

  const OrientationSwitcher({Key key, this.children}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Orientation orientation = MediaQuery.of(context).orientation;
    return orientation == Orientation.portrait
    ? Column(children: children)
    : Row(children: children);
  }
}

并使用它...

  Widget build(BuildContext context) {
    return OrientationSwitcher(
      children: <Widget>[
           // place children here like its a column or row.
        ]
    )
  }

您还可以使用Flex（）或任何其他小部件来完成此操作。

此外，除了方向之外，还有更多可用选项，请确保查看Flutter文档上的MediaQuery.of（context）实现。

颤振响应式设计：如果屏幕较大，则将“列”更改为“行”

2 个答案: