如何使行项目适合屏幕

Question

我有一行：

    final Size _mediaQuery = MediaQuery.of(context).size;
    File _storedImage;

     return Row(
      children: [
        Container(
          width: _mediaQuery.width * 0.45,
          height: _mediaQuery.height * 0.35,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.grey)),
          child: _storedImage != null
              ? Image.file(_storedImage, fit: BoxFit.cover, width: double.infinity)
              : Text('No image picked',),
          alignment: Alignment.center,
        ),
        Expanded(
          child: FlatButton.icon(
            icon: Icon(Icons.camera),
            label: Text('Take picture'),
            textColor: Theme.of(context).primaryColor,
            onPressed: () {},
          ),
        ),
      ],
    );

该行在 android 设备上如下所示：

---

一个问题：

如果我给我的容器一个更大的宽度，比如width: _mediaQuery.width * 0.65，那么行项目将不再适合该行，并且右侧的小部件将从屏幕边界溢出：

我会收到这个错误：

A RenderFlex overflowed by 31 pixels on the right. The relevant error-causing widget was: _FlatButtonWithIcon

---

到目前为止我做了什么：

阅读flutter-how-to-fix-a-renderflex-overflowed-by-pixels-error

检查扩展文档 - https://api.flutter.dev/flutter/widgets/Expanded-class.html

---

我需要在我的行中进行哪些更改，以使“拍照”按钮适合该行，无论我的容器大小如何？

Answer 1

您可以用Expanded 小部件包裹另一个Container，然后Row 小部件下的两个小部件的布局将平分。如果您希望其中一个小部件比另一个占用更多空间，您可以尝试使用 Expanded 小部件的 flex 属性。

Row(
  children: [
    Expanded(flex: 2,
     child:Container(
      
      height: _mediaQuery.height * 0.35,
      decoration:
          BoxDecoration(border: Border.all(width: 1, color: Colors.grey)),
      child: _storedImage != null
          ? Image.file(_storedImage, fit: BoxFit.cover, width: double.infinity)
          : Text('No image picked',),
      alignment: Alignment.center,
    )),
    Expanded(
      flex: 1,
      child: FlatButton.icon(
        icon: Icon(Icons.camera),
        label: Text('Take picture'),
        textColor: Theme.of(context).primaryColor,
        onPressed: () {},
      ),
    ),
  ],
);

Answer 2

创建一个新文件size_config.dart 并粘贴以下代码

import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class SizeConfig {
  static double _screenWidth;
  static double screenHeight;
  static double _blockWidth = 0;
  static double _blockHeight = 0;

  static double textMultiplier;
  static double imageSizeMultiplier;
  static double heightMultiplier;
  static double widthMultiplier;
  static bool isPortrait = true;
  static bool isMobilePortrait = false;

  void init(BoxConstraints constraints, Orientation orientation) {
    if (orientation == Orientation.portrait) {
      _screenWidth = constraints.maxWidth;
      screenHeight = constraints.maxHeight;
      isPortrait = true;
      if (_screenWidth < 450) {
        isMobilePortrait = true;
      }
    } else {
      _screenWidth = constraints.maxHeight;
      screenHeight = constraints.maxWidth;
      isPortrait = false;
      isMobilePortrait = false;
    }

    _blockWidth = _screenWidth / 100;
    _blockHeight = screenHeight / 100;

    textMultiplier = _blockHeight;

    heightMultiplier = _blockHeight;

    if (screenHeight > 620) {
      textMultiplier = _blockHeight / 1.15;

      heightMultiplier = _blockHeight / 1.15;
    }
    if (screenHeight > 720) {
      textMultiplier = _blockHeight / 1.25;

      heightMultiplier = _blockHeight / 1.25;
    }
    if (screenHeight > 820) {
      print('called text multipler text multi value');
      textMultiplier = _blockHeight / 1.25;

      heightMultiplier = _blockHeight / 1.25;
    }
    if (screenHeight > 920) {
      textMultiplier = _blockHeight / 1.30;
      heightMultiplier = _blockHeight / 1.30;
    }

    print('text multi value $textMultiplier $screenHeight $_blockHeight');
    imageSizeMultiplier = _blockWidth;

    widthMultiplier = _blockWidth;

    print(_screenWidth);
  }
}

现在使用 SizeConfig._screenWidth / 2 代替 _mediaquery
您的图像将根据屏幕尺寸覆盖一半宽度，这是一个安全的选项（根据您的需要更改值）

（您也可以使用 SizeConfig 的其他变量，例如 imageSizeMultiplier 用于图像示例imageSizeMultiplier * 20，textMultiplier 用于字体大小）

Answer 3

您的代码是正确的，Expanded 似乎不会特别影响 icon 小部件。

所以找到你想展示的图片并使用它而不是FlatButton.icon

Expanded(child: Image.network('https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI%27'))

所以Row 代码将如下所示

Row(
      children: [
        Container(
          width: MediaQuery.of(context).size.width * 0.45,
          height: MediaQuery.of(context).size.height * 0.35,
          decoration:
              BoxDecoration(border: Border.all(width: 1, color: Colors.grey)),
          child: _storedImage != null
              ? Image.file(_storedImage, fit: BoxFit.cover, width: double.infinity)
              : Text('No image picked',),
          alignment: Alignment.center,
        ),
        Expanded(child: Image.network('https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI%27'))
      ],
    );