0

我正在使用颤振网络来创建我的新网站。我正在使用灵活的小部件，但在某些浏览器尺寸之后不要让它工作。即在浏览器尺寸之后，这个 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,
            ),
          ),
      ],
      )      
    );
  }
}
4

1 回答 1

1

您可以LayoutBuilder在应用 flex 值后使用它来计算高度。如果结果高度满足约束 - 你继续使用 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 或更高版本

于 2019-08-05T07:24:10.963 回答