flutter - Flutter for web 中展开的最小宽度

Question

我上下搜索了答案，最后我不得不在这里提问，因为我需要一次解决2个问题。我对 Flutter 很陌生。我在这里不包含代码，因为我尝试的一切都不起作用，而且我相信它们无论如何都是错误的，但基本上我已经连续说 2 个小部件。第一个具有灵活的宽度，第二个具有固定的宽度。我想要的是第一个有一个最小宽度，这样当用户调整浏览器的宽度时，如果第一个小部件低于这个最小宽度，它将停止收缩，第二个小部件应该转到（环绕）下一行/排。当用户扩大浏览器宽度，并且有足够的空间容纳第一个小部件和第二个小部件的最小宽度时，第二个小部件将回到第一个小部件的同一行。如果我们有更多的额外空间，

任何想法？

添加图片

> import 'package:flutter/material.dart';
> 
> void main() => runApp(MyApp());
> 
> class MyApp extends StatelessWidget {   // This widget is the root  
> // of your application.   @override   Widget build(BuildContext
> context) {
>     return MaterialApp(
>         title: "ListView.builder",
>         theme: ThemeData(primarySwatch: Colors.green),
>         debugShowCheckedModeBanner: false,
>         home: ListViewBuilder());   } }
> 
> class ListViewBuilder extends StatelessWidget {   @override   Widget
> build(BuildContext context) {
>     return Scaffold(
>       appBar: AppBar(title: const Text("ListView.builder")),
>       body:
>           Wrap(
>             spacing: 8.0, // gap between adjacent chips
>             runSpacing: 4.0,
>             children: <Widget>[
>               TextField(), 
>               ElevatedButton.icon(
>                 icon:const Icon(Icons.play_circle),
>                 label:const Text("Play record"),
>                 onPressed: null),
>               ElevatedButton.icon(
>                 icon:const Icon(Icons.stop_circle),
>                 label:const Text("Stop record"),
>                 onPressed: null),
>               ElevatedButton.icon(
>                 icon:const Icon(Icons.pause_circle),
>                 label:const Text("Pause record"),
>                 onPressed: null),
>             ],
>           )
>     );   } }

标签： flutterflutter-layout

Answer 1

您将需要创建条件来更改布局和/或更改宽度。您可以通过编写如下代码来做到这一点：

MediaQuery.of(context).size.width > 600 ? 
//your code if true 
: 
//your code if false. 

您也可以使用相同的东西来确定容器的宽度

Container(
width: MediaQuery.of(context).size.width > 600 ? MediaQuery.of(context).size.width * 0.9 
// this will make the container width 90% of the screen width if the screen width was bigger than 600
:
300 
//This is will set the width to 300 (fixed  value) if the screen width was less than 600

)