Flutter如何让Container展开全高答案

【问题标题】：Flutter how to make the Container expand full heightFlutter如何让Container展开全高
【发布时间】：2023-03-05 06:30:02
【问题描述】：

我想扩展 Container 的背景颜色以占据整个高度。我已经尝试将高度设置为双无限，这只是摆脱了我的两个文本小部件标题和柠檬鸡。这是它在 Scalfold 小部件中的代码，这部分只是它的主体。

body: SingleChildScrollView(
    child: Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 36),
          child: GestureDetector(
            onTap: () => print('Add Image'),
            child: Icon(
              Icons.add_a_photo,
              size: 70,
              color: Theme.of(context).primaryColor,
            ),
          ),
        ),
        Container(
          width: double.infinity,
          margin: EdgeInsets.symmetric(horizontal: 24),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(24.0),
              topRight: Radius.circular(24.0),
            ),
            color: Colors.pink,
          ),
          child: Form(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: SingleChildScrollView(
                physics: NeverScrollableScrollPhysics(),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'Title',
                      style: TextStyle(
                          color: Colors.black, fontWeight: FontWeight.bold),
                    ),
                    Text(
                      'Lemon Chicken',
                      style:
                          TextStyle(color: Theme.of(context).primaryColor),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),

这是我的应用程序的图像。

我只是想扩展 Widget 有粉红色的背景色

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以使用 mediaquery 查找设备的高度并将其设置为容器的高度

    Container(
      height: MediaQuery.of(context).size.height,
      width: double.infinity,
      margin: EdgeInsets.symmetric(horizontal: 24),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(24.0),
          topRight: Radius.circular(24.0),
        ),
        color: Colors.pink,
      ),

或者你可以使用double.infinity

Container(
  height:double.infinity,

结果：

【讨论】：