颤振全宽容器答案

【问题标题】：Flutter full width Container颤振全宽容器
【发布时间】：2021-05-10 01:06:56
【问题描述】：

我正在尝试使 Container 全宽，但它不起作用

void main() {
  runApp(MaterialApp(
    title: "Practice",
    home: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.blueAccent)),
              child: Text("My Awesome Border"),
            )
          ],
        ),
      ],
    ),
  ));
}

这是在浏览器中的输出

我还有几个问题

为什么文字的颜色是红色，字号又大？
文字下面怎么会有黄线？

更新

解决了MediaQuery 的问题。这是供未来读者使用的完整代码。

void main() {
  runApp(MaterialApp(
      title: "Practice",
      home: Scaffold(
        body: MyHomeScreen(),
      )));
}

class MyHomeScreen extends StatelessWidget {
  const MyHomeScreen({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: Colors.orange,
                  border: Border.all(color: Colors.blueAccent)),
              child: Text("My Awesome Border"),
            )
          ],
        )
      ],
    );
  }
}

【问题讨论】：

标签： flutter dart widget flutter-web

【解决方案1】：

有几种可能性

1- 使用MediaQuery.of(context).size.width，

Container(
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(color: Colors.blue)),
    child: Text("My Awesome Border"),
)

这里，确保您的容器有一个具有context的父容器

2- 使用double.infinity

Container(
    width: double.infinty,
    decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(color: Colors.blue)),
    child: Text("My Awesome Border"),
)

3- 使用FractionallySizedBox 小部件

创建一个小部件，将其子部件的大小调整为总可用空间的一小部分。

示例：

FractionallySizedBox(
           widthFactor: 1.0, // between 0 and 1 // 1 for max
           heightFactor: 1.0,
           child:Container(color: Colors.red
           ,),
         )

4- 使用其他小部件，例如 Expanded、Flexible 和 AspectRatio 等。

输出：

【讨论】：

【解决方案2】：

通过使用 LayoutBuilder 为您的小部件创建一个父小部件，并将 constraint.maxWidth 设置为您的容器以填充宽度。

LayoutBuilder(
        builder: (context, constraint){
          return Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: constraint.maxWidth,
                    decoration:
                    BoxDecoration(border: Border.all(color: Colors.blueAccent)),
                    child: Text("My Awesome Border"),
                  )
                ],
              ),
            ],
          );
        },
      ),

希望你能达到你的要求。

您错过了将子小部件包装在 Scaffold 小部件中，如下所示，因此它只显示红色文本和黄线

 void main() {
  runApp(MaterialApp(
    title: "Practice",
    home: CartScreen()
  ));
}

class CartScreen extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: LayoutBuilder(
        builder: (context, constraint){
          return Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: constraint.maxWidth,
                    decoration:
                    BoxDecoration(border: Border.all(color: Colors.blueAccent)),
                    child: Text("My Awesome Border"),
                  )
                ],
              ),
            ],
          );
        },
      ),
    );
  }
}

【讨论】：

【解决方案3】：

我习惯于在移动设备上使用 Flutter，当我们没有 Scaffold 作为基本小部件时，通常会发生这种错误。我的意思是，我们可以有一个 SafeArea，它有一个 Scaffold 作为子级，但我认为我们不能使用 Column 作为根。所以尝试放置一个 Scaffold 并将 Column 设置为 Scaffold 的主体。希望这个答案对您有所帮助！

【讨论】：

【解决方案4】：

因为您在 MaterialPage 中使用了没有 Scaffold 或 CupertinoScaffold 的 Column。因此，如果您使用 Scaffold 包裹 Your Column，那么您会看到 Text 的黄色下划线被移除，并且文本将变为黑色。

我发现你的代码还有另一个问题，它是不是 dart 的格式错误，所以它不可读，所以我的意思是它不是干净的代码。

完全格式化的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: buildBody(),
      ),
    );
  }
  
  Widget buildBody(){
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.blueAccent)),
              child: Text("My Awesome Border"),
            )
          ],
        ),
      ],
    );
  }
}

【讨论】：

【解决方案5】：

你可以写：

 Container(
                width: double.infinite,
                
                child: Text("My Awesome Border"),
              )

【讨论】：