使用擴展小部件時什么都看不到

我正在嘗試將擴展小部件用于示例專案。我在列小部件中嵌入了一行作為 chldren 。在行內，我使用了具有 flex 屬性的擴展小部件。但是在洗掉擴展后我無法在螢屏上看到任何內容。我也嘗試將 Expanded 放在列之前，它也顯示了相同的錯誤。這是我的代碼：-

import 'package:flutter/material.dart';

void main() => runApp(
    const MaterialApp(home: MyApp())
);

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
              children:[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.green,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.deepOrange,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.white,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.lightGreenAccent,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.blue,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ]
            ),

        ),
      );
  }
}

uj5u.com熱心網友回復：

你的代碼看起來沒問題。只是，容器沒有內容，因此高度為零。例如，將它們包裹在 SizedBox 中，或者添加子項：

簡短提示：

您可能希望每個容器具有相同的寬度，因此為每個Expanded小部件提供相同的彈性系數是正確的。但該值不一定必須等于Row.

import 'package:flutter/material.dart';

void main() => runApp(
    const MaterialApp(home: MyApp())
);

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
              children:[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.green,
                        child: Text('1'),
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.deepOrange,
                        child: Text('2'),
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: SizedBox(
                        height: 20,
                        child: Container(
                          color: Colors.white,
                        ),
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.lightGreenAccent,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.blue,
                      ),
                    ),
                    Expanded(
                      flex:6,
                      child: Container(
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ]
            ),

        ),
      );
  }
}

uj5u.com熱心網友回復：

這里的問題是對Expanded小部件的高度沒有限制，因此它們沒有計算尺寸，因此不會被繪制

為了執行布局，Flutter 以深度優先遍歷的方式遍歷渲染樹，并將大小約束從父級傳遞到子級。在確定其大小時，子項必須尊重其父項給予它的約束。子物件通過在父物件建立的約束內將大小傳遞給父物件來做出回應。

所以你需要做的是要么用Expanded小部件包裹該行，要么用一個Container包裹它并指定高度

這就是如果用Expanded小部件包裹它會是什么樣子因為它被擴展了它填充了其父小部件Column的整個高度

如果它用具有 100px 高度約束的Container包裹，它會是什么樣子

uj5u.com熱心網友回復：

嘗試為 ROW 中的容器提供一些高度和寬度。

標籤：安卓 扑 镖

上一篇：表格中帶有顫動的可擴展行-可能嗎？

下一篇：在dart中制作布爾變數。我不知道我錯過了什么