Question

我正在使用Flutter Web创建我的新网站。我正在使用Flexible窗口小部件，但在某些浏览器尺寸之后不能使其正常工作。即，在浏览器调整了尺寸之后，该Flex视图停止了工作。怎么做？

下面是我的主页。飞镖

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

Answer 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或更高版本

屏幕尺寸过大后，不要让Flex视图调整大小

1 个答案: