在 Flutter 中使抽屉响应答案

【问题标题】：Make drawer responsive in Flutter在 Flutter 中使抽屉响应
【发布时间】：2022-12-19 00:36:33
【问题描述】：

我在 Flutter 中有这个抽屉，问题是当我调整屏幕大小时，文本（抽屉）一直断成两行或更多行（每行以一个字母结尾）。如何阻止屏幕调整大小，或者还有其他解决方案吗？我一直在查看 LayoutBuilder，但我认为它无法完成这项工作，因为我没有其他抽屉可用于较小的屏幕。

我正在为 Windows 桌面或 Web 而不是移动设备构建它。

 class DrawerListTile extends StatelessWidget {
  const DrawerListTile({
    Key key, @required this.title,@required this.svgSrc,@required this.press1,@required this.press2,@required this.press3,@required this.subTitle1,@required this.subTitle2,@required this.subTitle3
  }) : super(key: key);

  final String title,svgSrc,subTitle1,subTitle2,subTitle3;
  final VoidCallback press1,press2,press3;
  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      leading: SvgPicture.asset(
        svgSrc,
        color: Colors.black,
        height:16,
      ),
      title: Text(title),
      children: [

        ListTile(
          contentPadding: EdgeInsets.only(left:30),
          onTap:press1,
          horizontalTitleGap: 0.0,
          leading: Icon(Icons.arrow_right_rounded,color:Colors.black),
          title:Text(
            subTitle1,
            style: TextStyle(color: Colors.black,
            fontSize: 15),
          ),

        ),
        ListTile(
          contentPadding: EdgeInsets.only(left:30),
          onTap:press2,
          horizontalTitleGap: 0.0,
          leading: Icon(Icons.arrow_right_rounded,color:Colors.black),
          title:Text(
            subTitle2,
            style: TextStyle(color: Colors.black,
                fontSize: 15),
          ),

        ),
        ListTile(
          contentPadding: EdgeInsets.only(left:30),
          onTap:press3,
          horizontalTitleGap: 0.0,
          leading: Icon(Icons.arrow_right_rounded,color:Colors.black),
          title:Text(
            subTitle3,
            style: TextStyle(color: Colors.black,
                fontSize: 15),
          ),

        ),
      ],
    );

     
  }
}

【问题讨论】：

如果你喜欢将文本放在一行中，你可以使用FittedBox或AutoTextSize或者如果你喜欢剪辑使用最大行属性

标签： flutter dart flutter-layout

【解决方案1】：

听起来问题出在文本本身——在这种情况下，您可以使用这个包auto_size_text 来控制文本大小并防止它分成两行。

与@Yeasin Sheikh 的评论相同

【讨论】：