调整按钮以适应不同的屏幕尺寸

Posted 2023-02-23

【中文标题】调整按钮以适应不同的屏幕尺寸

【英文标题】：Resizing button to fit different screen sizes

【发布时间】：2020-01-23 23:24:52

【问题描述】：

我正在尝试使下面的按钮根据不同的屏幕尺寸调整大小，但保持相同的比例（即文本和按钮大小应按比例更改，以便它们在所有屏幕上看起来都相同）。我正在使用 AutoSizeText 包根据屏幕大小调整文本大小，但文本在较小的屏幕上似乎并没有变小，这可能导致按钮奇怪地调整大小。

[![button 1][1]][1] - 更大的屏幕 [![按钮 2][2]][2] - 更小的屏幕

我尝试使用媒体查询来调整按钮的高度和宽度，但这似乎不起作用。

有推荐的方法吗？

class PurchaseButton extends StatelessWidget 
  final Product product;

  PurchaseButton(Key key, @required this.product) : super(key: key);

  @override
  Widget build(BuildContext context) 
    double deviceWidth = MediaQuery.of(context).size.width;

    Container(
      margin: EdgeInsets.symmetric(horizontal: 0.05 * deviceWidth),

    child: Row(
      children: <Widget>[

    Expanded(
      child: MaterialButton(
//      height: SizeConfig.blockSizeVertical * 6,

        onPressed: () async 
          await Provider.of<SubscriptionModel>(context).makePurchase(product);
        ,
        child: Text('Join now! Only $product.priceString',
            style: Theme.of(context).textTheme.body1.copyWith(
                fontWeight: FontWeight.w600, fontSize: 0.03 * deviceWidth)),

        color: Theme.of(context).primaryColor,
      ),
      ),
    ],
    ),
    );
    return Container();
  

【参考方案1】：

有很多方法，这里有一个建议：

用这个小部件树包装你的小部件：

容器

：根据屏幕大小来操作宽度， --

Row

：我们需要它来强制 Expanded 工作， ----

已扩展

：将其内容扩展至其拥有的整个空间， ------[您要展开的小部件]

@override
Widget build(BuildContext context) 

  double deviceWidth = MediaQuery.of(context).size.width;
  double deviceHight = MediaQuery.of(context).size.height;

  Container(
      // If the button size(Row) is 90% then we give margin 5% + 5% like this
      margin: EdgeInsets.symmetric(horizontal: 0.05 * deviceWidth),

      // We need a Row in order to "Expanded" to work
      child: Row(
        children: <Widget>[
          // Use "Expanded" if you want the button to fill the Row's size
          // Use "Flexible" if you want the button to fit the text inside size.
          Expanded(
            child: MaterialButton(
              onPressed: () 
                print('Hi');
              ,
              child: Text(
                'Join now! Only...',
                style: Theme.of(context)
                    .textTheme
                    .body1
                    .copyWith(fontWeight: FontWeight.w600),
              ),
              color: Theme.of(context).primaryColor,
            ),
          ),
        ],
      ),
    );

关于AutoSizeText，它考虑了文本容器的大小，而不是屏幕大小，我的建议是使用常规的 Text(..) 小部件，其字体大小取自MediaQuery.of(context).size.width

例如

child: Text(
   'Join now! Only...',
   style: Theme.of(context)
          .textTheme
          .body1
          .copyWith(
             fontWeight: FontWeight.w600,
             fontSize: 0.03 * deviceWidth,
          ),
   ),

【讨论】：

谢谢，天哪！ - 我按照你说的那样实现了代码，但现在按钮根本没有显示 - 我在解释你的答案时犯了错误吗？ （将问题中的代码更新为我现在如何拥有它）

在更新后的代码中，您返回的是空容器return Container();，请查看快照代码的末尾。而是返回该行下方的容器double deviceWidth = MediaQuery.of(context).size.width;

与上述评论无关：关于fontSize: 0.03 * deviceWidth，也许你需要操纵它来找到最佳比例，它不一定是3%。

啊，这完全是我的错，现在完美了！谢谢！我会尝试看看哪种字体大小效果最好:)