FlutterRenderFlex子級具有非零flex，但傳入的高度約束是無限錯誤

我正在嘗試創建此布局（避免藍色背景中被擦除的部分）。也附上我的代碼。

class TasksScreen extends StatelessWidget {
  const TasksScreen({
    Key ? key
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.lightBlueAccent,
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.only(
                top: 60.0, bottom: 30.0, right: 30.0, left: 30.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: < Widget > [
                  const CircleAvatar(
                      backgroundColor: Colors.white,
                      child: Icon(
                        Icons.list,
                        color: Colors.lightBlueAccent,
                        size: 30.0,
                      ),
                      radius: 30.0,
                    ),
                    const SizedBox(
                        height: 10.0,
                      ),
                      const Text(
                          'TodoList',
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                            fontSize: 50.0,
                          ),
                        ),
                        const Text(
                            '12 items',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18.0,
                            ),
                          ),
                          Expanded(
                            child: Container(
                              padding: const EdgeInsets.symmetric(horizontal: 20.0),
                                decoration: const BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(20.0),
                                    topRight: Radius.circular(20.0)),
                                ),
                            ),
                          ),
                ]),
          ),
        ],
      ));
  }
}

我收到錯誤“RenderFlex 子項具有非零 flex 但傳入的高度約束是無限錯誤”。我Expanded用Flexible. 應用程式構建，我使用浮動操作按鈕獲得圖示和文本，但我沒有獲得白色容器區域。如果我保留Expanded，我會看到完整的淺藍色螢屏。

我怎樣才能做到這一點？

uj5u.com熱心網友回復：

改為這樣做！容器是愚蠢的，在您提供寬度和高度之前，它們不會知道填充空間的范圍！

在我的例子中，我使用媒體查詢來確定容器的高度（白色部分）

這是代碼：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class TasksScreen extends StatelessWidget {
  const TasksScreen({
    Key ? key
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.lightBlueAccent,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.lightBlueAccent,
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const  SizedBox(height: 50,),
              Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: < Widget > [
                    Padding(
                      padding: const EdgeInsets.only(left:30.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: const[
                           CircleAvatar(
                            backgroundColor: Colors.white,
                            child: Icon(
                              Icons.list,
                              color: Colors.lightBlueAccent,
                              size: 30.0,
                            ),
                            radius: 30.0,
                          ),
                           SizedBox(
                            height: 10.0,
                          ),
                           Text(
                            'TodoList',
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w700,
                              fontSize: 50.0,
                            ),
                          ),
                           Text(
                            '12 items',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18.0,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                        height: MediaQuery.of(context).size.height,
                        decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20.0),
                        topRight: Radius.circular(20.0)),
                        ),
                      ),
                  ]),
            ],
          ),
        ));
  }
}

而且我將頂部分組在一個列中，以便我可以概括填充。

干杯：）

標籤：扑 镖 颤振布局

上一篇：有沒有辦法在GridView中獲得固定大小的孩子？

下一篇：嵌套FIREBASEGET請求的顫振錯誤