【问题标题】:Flutter | remove extra space from Switch widget颤振 |从 Switch 小部件中删除多余的空间
【发布时间】:2020-05-18 20:16:59
【问题描述】:

我正在 Flutter 应用程序的下面屏幕上工作,但是当我使用 Switch 小部件时,它会破坏对齐,因为在 Flutter 中已经定义了硬编码的高度和宽度。

我怎样才能摆脱多余的空间

注意:同样的问题也使用单选按钮或复选框

【问题讨论】:

  • 粘贴代码以更好地理解问题。请在图片中告诉您所需的屏幕。
  • 当然你可以通过改变主题来做到这一点,但它违反了材料设计指南(当前尺寸是手指触摸尺寸)。 material.io/design/guidelines-overview/#addition
  • @RahulKhatri 每当使用 Switch 小部件时,这都是一个常见问题。
  • 你是如何在第二张图片中显示这些小部件的边界线的?
  • @user3739779 当您使用 vscode 运行项目时,它会打开一个浏览器选项卡,您可以在其中检查小部件并检查它们的边框

标签: flutter material-design


【解决方案1】:

您应该用SizedBox 包裹Switch 并设置您的宽度和高度。

【讨论】:

    【解决方案2】:

    要从Switch 小部件中删除填充,您需要将materialTapTargetSize 设置为shrinkWrap

    Switch(
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      onChanged: (bool value) {},
    )
    

    【讨论】:

      【解决方案3】:

      您可以尝试将 Switch 小部件包装在 Container 中

      Container(
        height: 20,
        width: 50,
        child: Switch(
         value: _value,
         onChanged: (value){
          setState((){
            _value = value
          });
         }
        )
      );
      

      【讨论】:

      • 不幸的是还是同样的问题