Flutter 全宽容器

Question

我正在尝试制作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"),
            )
          ],
        )
      ],
    );
  }
}

Answer 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.infinity,
    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等。

输出 ：

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

希望它能帮助您达到您的要求。

您错过了将子小部件包装在脚手架小部件内，如下所示，以便仅显示红色文本和黄线

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