Flutter Ui 实验室（七）一点小技巧

不知道你在Flutter中使用Row的时候有没有遇到这样的情况：
当你的Row里面的子Widget数量多了，整个Row的宽度大于屏幕宽度了，系统会提示你 类似这样的错误信息 “A RenderFlex overflowed by 46 pixels on the right” 截图如下

image.png

怎么解决这个问题呢？

1. 使用FittedBox来包住你的Row， 里面的子Widget会根据情况自己改变大小来适应屏幕尺寸
   效果如下

   
   
   

   image.png

2. 使用Wrap来包住你的Row，里面的子Widget会根据屏幕尺寸自动换行显示
   效果如下

   
   
   

   image.png
   
   

   你可以根据你的UI要求灵活选择解决方案
   最后完整代码如下：

import 'package:flutter/material.dart';

class TipsUi extends StatelessWidget {

  List _getWidgets() {
    return new List.generate(5, (i) {
      return RaisedButton(
        onPressed: (){},
        child: Text("Btn $i"),
      );
    });
  }

  // 有问题的情况
  Widget _getBody() {
    return Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          children: _getWidgets(),
        ),
      );
  }

  // 使用FittedBox来包住你的Row，
  // 里面的子Widget会根据情况自己改变大小来适应屏幕尺寸
  Widget _getBodySolution1() {
    return FittedBox(
      child: Padding(
          padding: EdgeInsets.all(10.0),
          child: Row(
            children: _getWidgets(),
          ),
        ),
    );
  }

  // 使用Wrap来包住你的Row，
  // 里面的子Widget会根据屏幕尺寸自动换行显示
  Widget _getBodySolution2() {
    return Wrap(
      children: _getWidgets(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ui Tips'),
      ),
      body: _getBody(),
    );
  }
}

参考链接：YouTube