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

Question

我正在尝试使下面的按钮根据不同的屏幕尺寸调整大小，但保持相同的比例（即文本和按钮大小应按比例更改，以便它们在所有屏幕上看起来都相同）。我正在使用 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();
  }
}

Answer 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,
          ),
   ),