Question

我希望我的Flutter应用在倾斜的手机和正常握持时的外观保持一致。
我已经为每个州创建了一个解决方案，但是我想不出一个同时适用于两种情况的解决方案。

所以我的问题是：如何用一个代码库实现以下目标？
-并且如果不容易做到：如何让我的应用动态决定使用哪种布局？

这是我的应用的缩小示例（我的generateList*方法如下所示）：

void main(List<String> arguments) async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test",
      home: Scaffold(
        body: ListView(
          //children: generateListTilted(),
          //or
          children: generateListNotTilted(),
        ),
      ),
    );
  }
}

我的行包含两个信息字段，date和content。
date并不总是具有确切的宽度，因为已经清楚地说明了月份，但是类似。
content的长度始终相同。

案例：手机倾斜/宽屏

如果一行中的两个字段都有足够的空间，则每一行应看起来像它具有两个列-第一个具有最大日期字段的宽度，第二个仅填充其余空间并居中。我不知道如何自动将宽度调整为最宽的日期，所以我只是将flex属性设置为一种解决方法：

List<Widget> generateListTilted() {
    var sameSizeContent = "TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST";
    var slightlyVariableLengthDates = ["August, 21 2019", "May, 1 2019"];
    List<Widget> listOfRows = [];
    for (var i = 0; i < slightlyVariableLengthDates.length; i++) {
      listOfRows.add(
        Container(
          padding: const EdgeInsets.all(2.0),
          child: Row(
            children: <Widget>[
              Expanded(
                  flex: 3,
                  child: Text(
                    slightlyVariableLengthDates[i],
                    textAlign: TextAlign.right,
                  )),
              Expanded(
                flex: 7,
                child: Text(
                  sameSizeContent,
                  textAlign: TextAlign.center,
                ),
              )
            ],
          ),
        ),
      );
    }
    return listOfRows;
  }

案例：手机未倾斜/小屏幕

如果date和content不能排成一行，则应将它们换行，并且date应该位于左上角-但又要保持最长日期和右对齐的宽度（我无法实现这一目标，因此我编辑了屏幕截图以使其清晰可见。）
content应该再次居中：

List<Widget> generateListNotTilted() {
  var sameSizeContent = "TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST";
  var slightlyVariableLengthDates = ["August, 21 2019", "May, 1 2019"];
  List<Widget> listOfRows = [];
  for (var i = 0; i < slightlyVariableLengthDates.length; i++) {
    listOfRows.add(
      Container(
        padding: const EdgeInsets.all(2.0),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Wrap(
                crossAxisAlignment: WrapCrossAlignment.center,
                children: [
                  Text(
                    slightlyVariableLengthDates[i],
                  ),
                  Center(child: Text(sameSizeContent))
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
  return listOfRows;
}

Answer 1

我希望我的Flutter应用在倾斜手机时看起来能保持某种状态与正常情况下的时间。我为每个州创建了一个解决方案但我想不出一种同时适用于两者的解决方案。

使用MediaQuery来了解您当前的屏幕方向以及其他与设备相关的信息。

示例代码：

Container(
alignment: Alignment.center,
child:  
(MediaQuery.of(context).orientation == Orientation.portrait)
Text("Portrait")
:
Text("Landscape")
)

注意：我已经在Text小部件外部使用了三元运算符，以表明三元运算符几乎可以在任何地方使用（Widget，String，参数值），而我们只需要应用少量的逻辑UI更改即可。

Answer 2

如果您要使UI响应，请将answer签出至类似问题。

具有特定宽度和对齐方式的响应式包装行

2 个答案: