Question

我在一行中实现了单选按钮，并在部分设备上测试了ui。在像iPhone 5s这样的小型设备中，我遇到了溢出错误。

Widget priority() {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          child: const Text('Priority:'),
        ),
        Row(
          children: <Widget>[
            radioButton('High', 0),
            radioButton('Medium', 1),
            radioButton('Low', 2),
          ],
        )
      ],
    );
  }

  Widget radioButton(String text, int value) {
    return Row(
      children: <Widget>[
        Radio<int>(
            activeColor: pinkColor,
            value: value,
            groupValue: _selected,
            onChanged: (int value) {
              onChange(value);
            }),
        Text(text, style: TextStyle(fontSize: 15)),
      ],
    );
  }

Answer 1

添加SingleChildScrollView即可。

TimeOfLog

}

Answer 2

Widget priority() {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          child: const Text('Priority:'),
        ),
        Wrap(
          direction: Axis.horizontal,
          children: <Widget>[
            radioButton('High', 0),
            radioButton('Medium', 1),
            radioButton('Low', 2),
          ],
        )
      ],
    );
  }

  Widget radioButton(String text, int value) {
    return Row(
      children: <Widget>[
        Radio<int>(
            activeColor: pinkColor,
            value: value,
            groupValue: _selected,
            onChanged: (int value) {
              onChange(value);
            }),
        Text(text, style: TextStyle(fontSize: 15)),
      ],
    );
  }

将Row替换为Wrap。如果发生溢出，则溢出的窗口小部件将在下一行对齐。希望能帮助到你。

Answer 3

嘿，使用扩展的小部件来解决溢出问题，对于IOS，Android问题将整个小部件包装在SafeArea中，希望对您有所帮助...

Answer 4

解决方案代码：

Widget priority() {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          child: const Text('Priority:'),
        ),
        Row(
          children: <Widget>[
            Expanded(child: radioButton('High', 0),),
            Expanded(child: radioButton('Medium', 1),),
            Expanded(child: radioButton('Low', 2),),,
          ],
        )
      ],
    );
  }

  Widget radioButton(String text, int value) {
    return Row(
      children: <Widget>[
        Radio<int>(
            activeColor: pinkColor,
            value: value,
            groupValue: _selected,
            onChanged: (int value) {
              onChange(value);
            }),
        Text(text, style: TextStyle(fontSize: 15)),
      ],
    );
  }

您在某些设备上而不是其他设备上遇到它的原因是所有设备的屏幕尺寸都不同。

扩展小部件可确保其子小部件覆盖所有可用空间，同时它位于小部件列表（[]）中的其他小部件中

当我们在多个窗口小部件上使用它时，它将在彼此之间平均分配空间。您可以使用flex属性来控制每个小部件占用的大小。

如果在Expanded小部件之间引入非Expanded小部件，则首先将非扩展一次放置在Expanded小部件之前。

（至少，这是Flutter的“本周微件”视频中提到的内容。但是，我认为它的复杂性我们不需要知道。）

提示：避免在这些地方使用函数...改用类。

Flutter官方团队提供的精美教程：

https://flutter.dev/docs/development/ui/interactive

Answer 5

您需要尝试SingleChildScrollView（）。

某些iOS和Android设备中的溢出问题

5 个答案: