代码之家  ›  专栏  ›  技术社区  ›  Tamir Abutbul AVK

如何将行项目调整到屏幕

  •  0
  • Tamir Abutbul AVK  · 技术社区  · 4 年前

    我吵了一架:

        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: () {},
              ),
            ),
          ],
        );
    
    

    enter image description here


    一个问题:

    如果我愿意给我一个更宽的容器 width: _mediaQuery.width * 0.65 行项目将不再适合该行,而右窗口小部件1将从屏幕边界溢出:

    enter image description here

    我会得到这个错误:

    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


    我需要在我的行中更改什么,以便“拍照”按钮将适合行内,而不管我的容器有多大?

    1 回复  |  直到 4 年前
        1
  •  2
  •   Guy Luz    4 年前

    你的代码是正确的 Expanded 不会特别影响 icon

    所以找到你想要展示的图片,用它代替 FlatButton.icon

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

    enter image description here

    enter image description here

    所以 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'))
          ],
        );
    
        2
  •  1
  •   MRazaImtiaz    4 年前

    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

    imageSizeMultiplier * 20

        3
  •  1
  •   HasilT    4 年前

    你可以把另一个包起来 Container 具有 Expanded 窗口小部件,则布局将为 Row 小装置。如果您希望其中一个小部件比另一个小部件占用更多的空间,可以使用 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: () {},
          ),
        ),
      ],
    );