不要让 Flex 视图在某些屏幕尺寸后调整大小答案

【问题标题】：don't let Flex view resize after some screen size不要让 Flex 视图在某些屏幕尺寸后调整大小
【发布时间】：2019-12-12 12:51:19
【问题描述】：

我正在使用 Flutter Web 来创建我的新网站。我正在使用灵活的小部件，但在某些浏览器尺寸之后不要让它工作。即在浏览器尺寸后，此 Flex 视图停止工作。怎么做？

下面是我的主页.dart

import 'package:flutter_web/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
        Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.20,
              child: Padding(
                padding: EdgeInsets.only(
                  left: MediaQuery.of(context).size.width*0.20,
                ),
                child: Row(
                  children: <Widget>[
                    Icon(IconData(58819, fontFamily: 'MaterialIcons'), color: Colors.red), // apps icon
                    Text("mysite", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),)
                  ],
                ),
              ),
              ),
          ),
          Flexible(
            flex: 7,
            fit: FlexFit.tight,
            child: Container(
              color: Colors.purple,
              child: Padding(
                padding: EdgeInsets.only(
                  left: MediaQuery.of(context).size.width*0.20,
                ),
                child: Row(
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                        child: Text("Word to PDF"),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          Flexible(
            flex: 3,
            fit: FlexFit.tight,
            child: Container(
              height: MediaQuery.of(context).size.height * 0.30,
              color: Colors.green,
            ),
          ),
      ],
      )      
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

您可以在应用弹性值后使用LayoutBuilder 计算高度。如果结果高度满足约束 - 你继续使用 flex。如果没有 - 请改用SizedBox。

这是一个例子：

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: LayoutBuilder(builder: (context, constraints) {
        final minHeight = 150.0;

        // 1 is flex value of the widget
        // 6 is sum of all flex values in column
        final flexHeight = 1 / 6 * constraints.maxHeight;
        return Column(
          children: <Widget>[
            Flexible(
              flex: 3,
              child: Container(color: Colors.red),
            ),
            Flexible(
              flex: 2,
              child: Container(color: Colors.green),
            ),
            if (flexHeight > minHeight)
              Flexible(
                flex: 1,
                child: getConstrainedContainer(),
              ),
            if (flexHeight <= minHeight)
              SizedBox(
                height: minHeight,
                child: getConstrainedContainer(),
              )
          ],
        );
      }),
    ),
  ));
}

Widget getConstrainedContainer() {
  return Container(color: Colors.blue);
}

注意：提供的示例代码需要 dart 2.2.2 或更高版本

【讨论】：