使容器小部件高度适合父行高度

时间:2019-10-11 02:52:46

标签: flutter flutter-layout

我有一个具有以下布局的Web应用程序:

enter image description here

我正在尝试创建一个布局相似的flutter应用程序,这是我到目前为止所拥有的:

enter image description here

出于复制目的,我的布局逻辑如下(在本示例中,我所有的代码都在main.dart文件中)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Assemblers Tasks',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: MyHomePage(title: 'Assembly Tasks'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String dropdownValue;

  List<Map<String, dynamic>> buildItems = [];
  getBuilds() {
    List<Map<String, dynamic>> items = [];
    items.add({"id": 10, "vehicleModel": "A10", "vehicleNumber": "TEST-00010"});
    setState(() {
      buildItems = items;
    });
  }

  List<Map<String, dynamic>> buildSections = [];
  getSections() {
    List<Map<String, dynamic>> items = [];
    items.add({
      "id": 5,
      "section": "Front",
    });
    items.add({
      "id": 15,
      "section": "Rear",
    });
    setState(() {
      buildSections = items;
    });
  }

  Future<List<Map<String, dynamic>>> getSystems(String buildSectionId) async {
    List<Map<String, dynamic>> items = [];
    if (int.parse(buildSectionId) == 5) {
      items.add({
        "id": 4,
        "system": "Hydraulics",
      });
      items.add({
        "id": 20,
        "system": "High Voltage",
      });
    }
    return items;
  }

  @override
  void initState() {
    getBuilds();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: 275.0,
                  child: DropdownButton(
                      value: dropdownValue,
                      hint: Text("Choose Build"),
                      isExpanded: true,
                      items: buildItems
                          .map<Map<String, String>>((Map<String, dynamic> item) {
                            String id = item["id"].toString();
                            String name = item["vehicleModel"] + " " + item["vehicleNumber"];
                            return {"id": id, "name": name};
                          })
                          .toList()
                          .map<DropdownMenuItem<String>>((Map<String, String> item) {
                            return DropdownMenuItem<String>(
                              value: item["id"],
                              child: Text(item["name"]),
                            );
                          })
                          .toList(),
                      onChanged: (String newValue) {
                        getSections();
                        setState(() {
                          dropdownValue = newValue;
                        });
                      }),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Container(
                  width: 150.0,
                  height: 60.0,
                  color: Colors.black,
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "SECTION",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17.3,
                        letterSpacing: 1.35,
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 150.0,
                  height: 60.0,
                  color: Color(0xff444444),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "SYSTEM",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17.3,
                        letterSpacing: 1.35,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 60.0,
                    padding: EdgeInsets.only(left: 36.0),
                    margin: EdgeInsets.only(right: 72.0),
                    color: Color(0xff666666),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "TASK",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 17.3,
                          letterSpacing: 1.35,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black12, width: 1.0, style: BorderStyle.solid)),
                    height: MediaQuery.of(context).size.height - 225,
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: buildSections.length,
                      itemBuilder: (BuildContext context, int index) {
                        String section = buildSections[index]["section"] != null ? buildSections[index]["section"] : "";
                        String buildSectionId = buildSections[index]["id"].toString();
                        return Row(
                          children: <Widget>[
                            Container(
                              width: 150.0,
                              decoration: BoxDecoration(
                                border: Border(
                                  right: BorderSide(
                                    color: Colors.black12,
                                    width: 1.0,
                                  ),
                                  bottom: BorderSide(
                                    color: Colors.black12,
                                    width: 1.0,
                                  ),
                                ),
                              ),
                              padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Align(
                                    alignment: Alignment.center,
                                    child: Center(
                                      child: RotatedBox(
                                        quarterTurns: -1,
                                        child: Text(
                                          section.toUpperCase(),
                                          style: TextStyle(
                                            fontSize: 15.0,
                                            letterSpacing: 1.2,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.all(12.0),
                                  ),
                                  Align(
                                    alignment: Alignment.center,
                                    child: FloatingActionButton(
                                      child: Icon(Icons.image),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            FutureBuilder(
                              future: getSystems(buildSectionId),
                              builder: (BuildContext context, AsyncSnapshot systemsSnap) {
                                if (systemsSnap.connectionState == ConnectionState.waiting) {
                                  return Container(
                                    height: 100.0,
                                    width: 200.0,
                                    child: Text("Please wait..."),
                                  );
                                } else if (systemsSnap.hasError) {
                                  return Container(
                                    height: 100.0,
                                    width: 200.0,
                                    child: Text("Oops! There was an error!"),
                                  );
                                }
                                return Row(
                                  children: <Widget>[
                                    Container(
                                      width: MediaQuery.of(context).size.width - 256.0,
                                      child: ListView.builder(
                                        shrinkWrap: true,
                                        itemCount: systemsSnap.data.length,
                                        itemBuilder: (context, index) {
                                          Map<String, dynamic> system = systemsSnap.data[index];
                                          String systemName = system["system"];
                                          return Row(
                                            children: <Widget>[
                                              Container(
                                                padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
                                                width: 150.0,
                                                decoration: BoxDecoration(
                                                  border: Border(
                                                    right: BorderSide(
                                                      color: Colors.black12,
                                                      width: 1.0,
                                                    ),
                                                    bottom: BorderSide(
                                                      color: Colors.black12,
                                                      width: 1.0,
                                                    ),
                                                  ),
                                                ),
                                                child: Column(
                                                  children: <Widget>[
                                                    Align(
                                                      alignment: Alignment.center,
                                                      child: RotatedBox(
                                                        quarterTurns: -1,
                                                        child: Text(
                                                          systemName.toUpperCase(),
                                                          style: TextStyle(
                                                            fontSize: 15.0,
                                                            letterSpacing: 1.2,
                                                          ),
                                                        ),
                                                      ),
                                                    ),
                                                    Padding(
                                                      padding: EdgeInsets.all(12.0),
                                                    ),
                                                    Align(
                                                      alignment: Alignment.center,
                                                      child: FloatingActionButton(
                                                        child: Icon(Icons.image),
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ],
                                          );
                                        },
                                      ),
                                    ),
                                  ],
                                );
                              },
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
                  child: Column(
                    children: <Widget>[
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.photo_library),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.library_books),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.list),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.history),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

上面的代码已准备好粘贴到main.dart文件中并在虚拟设备(最好是平板电脑)上预览。

到目前为止,我已经尝试了在这些帖子中找到的解决方案,但无济于事:
 -Make container widget fill parent vertically
 -Flutter Container height same as parent height
 -Flutter expand Container to fill remaining space of Row
 -The equivalent of wrap_content and match_parent in flutter?

由于包含 Container 部分的 Row 行还具有由 FutureBuilder 生成的 ListView 的高度会自动扩展以适合 ListView 。我还希望容器部分扩展到与 Row 小部件扩展方式相同的高度;即,容器部分的底部边框,其中 FRONT ,应与高度电压系统的底部边框和右侧边框对齐 FRONT 部分 Container 的顶部,应该一直到顶部。

我已经花了3天没有解决办法。


编辑

我已经尝试过@MaadhavSharma提供的答案的建议,但出现以下异常:

  

════════渲染库捕获异常════════════════════════════
  在performLayout()期间引发了以下断言:   BoxConstraints强制将高度设为无限。

4 个答案:

答案 0 :(得分:2)

我更改了一些结构以使其起作用,这是整个build()方法:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: 275.0,
                  child: DropdownButton(
                      value: dropdownValue,
                      hint: Text("Choose Build"),
                      isExpanded: true,
                      items: buildItems
                          .map<Map<String, String>>((Map<String, dynamic> item) {
                        String id = item["id"].toString();
                        String name = item["vehicleModel"] + " " + item["vehicleNumber"];
                        return {"id": id, "name": name};
                      })
                          .toList()
                          .map<DropdownMenuItem<String>>((Map<String, String> item) {
                        return DropdownMenuItem<String>(
                          value: item["id"],
                          child: Text(item["name"]),
                        );
                      })
                          .toList(),
                      onChanged: (String newValue) {
                        getSections();
                        setState(() {
                          dropdownValue = newValue;
                        });
                      }),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Container(
                  width: 150.0,
                  height: 60.0,
                  color: Colors.black,
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "SECTION",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17.3,
                        letterSpacing: 1.35,
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 150.0,
                  height: 60.0,
                  color: Color(0xff444444),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "SYSTEM",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17.3,
                        letterSpacing: 1.35,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 60.0,
                    padding: EdgeInsets.only(left: 36.0),
                    margin: EdgeInsets.only(right: 72.0),
                    color: Color(0xff666666),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "TASK",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 17.3,
                          letterSpacing: 1.35,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black12, width: 1.0, style: BorderStyle.solid)),
                    height: MediaQuery.of(context).size.height - 225,
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: buildSections.length,
                      itemBuilder: (BuildContext context, int index) {
                        String section = buildSections[index]["section"] != null ? buildSections[index]["section"] : "";
                        String buildSectionId = buildSections[index]["id"].toString();
                        return IntrinsicHeight(
                          child:  Row(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: <Widget>[
                              Container(
                                width: 150.0,
                                decoration: BoxDecoration(
                                  color: Colors.green,
                                  border: Border(
                                    right: BorderSide(
                                      color: Colors.black12,
                                      width: 1.0,
                                    ),
                                    bottom: BorderSide(
                                      color: Colors.black12,
                                      width: 1.0,
                                    ),
                                  ),
                                ),
                                padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Align(
                                      alignment: Alignment.center,
                                      child: Center(
                                        child: RotatedBox(
                                          quarterTurns: -1,
                                          child: Text(
                                            section.toUpperCase(),
                                            style: TextStyle(
                                              fontSize: 15.0,
                                              letterSpacing: 1.2,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.all(12.0),
                                    ),
                                    Align(
                                      alignment: Alignment.center,
                                      child: FloatingActionButton(
                                        child: Icon(Icons.image),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              FutureBuilder(
                                future: getSystems(buildSectionId),
                                builder: (BuildContext context, AsyncSnapshot systemsSnap) {
                                  if (systemsSnap.connectionState == ConnectionState.waiting) {
                                    return Container(
                                      height: 100.0,
                                      width: 200.0,
                                      child: Text("Please wait..."),
                                    );
                                  } else if (systemsSnap.hasError) {
                                    return Container(
                                      height: 100.0,
                                      width: 200.0,
                                      child: Text("Oops! There was an error!"),
                                    );
                                  }

                                  return

                                    Container(
                                      width: MediaQuery.of(context).size.width - 256.0,
                                      child: Column(
                                        children: systemsSnap.data.map<Widget>((e) => Container(
                                          padding: EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
                                          width: 150.0,
                                          decoration: BoxDecoration(
                                            border: Border(
                                              right: BorderSide(
                                                color: Colors.black12,
                                                width: 1.0,
                                              ),
                                              bottom: BorderSide(
                                                color: Colors.black12,
                                                width: 1.0,
                                              ),
                                            ),
                                          ),
                                          child: Column(
                                            children: <Widget>[
                                              Align(
                                                alignment: Alignment.center,
                                                child: RotatedBox(
                                                  quarterTurns: -1,
                                                  child: Text(
                                                    e["system"].toUpperCase(),
                                                    style: TextStyle(
                                                      fontSize: 15.0,
                                                      letterSpacing: 1.2,
                                                    ),
                                                  ),
                                                ),
                                              ),
                                              Padding(
                                                padding: EdgeInsets.all(12.0),
                                              ),
                                              Align(
                                                alignment: Alignment.center,
                                                child: FloatingActionButton(
                                                  child: Icon(Icons.image),
                                                ),
                                              ),
                                            ],
                                          ),
                                        )).toList(),
                                      ),
                                    );

//                                  Row(
//                                  children: <Widget>[
//                                    Container(
//                                      width: MediaQuery.of(context).size.width - 256.0,
//                                      child: ListView.builder(
//                                        shrinkWrap: true,
//                                        itemCount: systemsSnap.data.length,
//                                        itemBuilder: (context, index) {
//                                          Map<String, dynamic> system = systemsSnap.data[index];
//                                          String systemName = system["system"];
//                                          return Row(
//                                            children: <Widget>[
//
//                                            ],
//                                          );
//                                        },
//                                      ),
//                                    ),
//                                  ],
//                                );
                                },
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
                  child: Column(
                    children: <Widget>[
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.photo_library),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.library_books),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.list),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.history),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

基本上,我将ListView的第二个元素的Row更改为Column,因为它已经在ListView内并且使其具有双滚动并且高度没有适当地扩大行的高度,而且我将Row包裹在IntrinsicHeight内,并将crossAxisAlignment: CrossAxisAlignment.stretch放在Row上,因此内容适合Row的高度。

使用IntrinsicHeight的代价很高,但是对于您构造窗口小部件的方式,我看不到其他解决方案。我建议您尝试优化所有结构,以便找到更好和最佳的解决方案。

答案 1 :(得分:1)

如果要拉伸容器以匹配其父容器,请对height和width属性使用double.infinity

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container as a layout')),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.yellowAccent,
      child: Text("Hi"),
    ),
  );
}

答案 2 :(得分:1)

我认为您将需要使用一些固定的高度,因为您正在使用ListView和FutureBuiulders。如果您可以摆脱FutureBuilders,则可能可以实现动态高度。请注意,父行的高度为320,子行的高度为160。

但是看看这个:

enter image description here

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Assemblers Tasks',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: MyHomePage(title: 'Assembly Tasks'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String dropdownValue;

  List<Map<String, dynamic>> buildItems = [];
  getBuilds() {
    List<Map<String, dynamic>> items = [];
    items.add({"id": 10, "vehicleModel": "A10", "vehicleNumber": "TEST-00010"});
    setState(() {
      buildItems = items;
    });
  }

  List<Map<String, dynamic>> buildSections = [];
  getSections() {
    List<Map<String, dynamic>> items = [];
    items.add({
      "id": 5,
      "section": "Front",
    });
    items.add({
      "id": 15,
      "section": "Rear",
    });
    setState(() {
      buildSections = items;
    });
  }

  Future<List<Map<String, dynamic>>> getSystems(String buildSectionId) async {
    List<Map<String, dynamic>> items = [];
    if (int.parse(buildSectionId) == 5) {
      items.add({
        "id": 4,
        "system": "Hydraulics",
      });
      items.add({
        "id": 20,
        "system": "High Voltage",
      });
    }
    return items;
  }

  @override
  void initState() {
    getBuilds();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: 275.0,
                  child: DropdownButton(
                      value: dropdownValue,
                      hint: Text("Choose Build"),
                      isExpanded: true,
                      items: buildItems
                          .map<Map<String, String>>(
                              (Map<String, dynamic> item) {
                            String id = item["id"].toString();
                            String name = item["vehicleModel"] +
                                " " +
                                item["vehicleNumber"];
                            return {"id": id, "name": name};
                          })
                          .toList()
                          .map<DropdownMenuItem<String>>(
                              (Map<String, String> item) {
                            return DropdownMenuItem<String>(
                              value: item["id"],
                              child: Text(item["name"]),
                            );
                          })
                          .toList(),
                      onChanged: (String newValue) {
                        getSections();
                        setState(() {
                          dropdownValue = newValue;
                        });
                      }),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Container(
                  width: 150.0,
                  height: 60.0,
                  color: Colors.black,
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "SECTION",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17.3,
                        letterSpacing: 1.35,
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 150.0,
                  height: 60.0,
                  color: Color(0xff444444),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      "SYSTEM",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17.3,
                        letterSpacing: 1.35,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 60.0,
                    padding: EdgeInsets.only(left: 36.0),
                    margin: EdgeInsets.only(right: 72.0),
                    color: Color(0xff666666),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "TASK",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 17.3,
                          letterSpacing: 1.35,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Container(

                    decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.black12,
                            width: 1.0,
                            style: BorderStyle.solid)),
                    height: MediaQuery.of(context).size.height - 225,
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: buildSections.length,
                      itemBuilder: (BuildContext context, int index) {
                        String section = buildSections[index]["section"] != null
                            ? buildSections[index]["section"]
                            : "";
                        String buildSectionId =
                            buildSections[index]["id"].toString();
                        return Container(
                          height: 320,
                          child: Row(

                            children: <Widget>[
                              Container(                                
                                width: 120.0,
                                decoration: BoxDecoration(
                                  border: Border(
                                    right: BorderSide(
                                      color: Colors.yellow,
                                      width: 1.0,
                                    ),
                                    bottom: BorderSide(
                                      color: Colors.black12,
                                      width: 1.0,
                                    ),
                                  ),
                                ),
                                padding:
                                    EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Align(
                                      alignment: Alignment.center,
                                      child: Center(
                                        child: RotatedBox(
                                          quarterTurns: -1,
                                          child: Text(
                                            section.toUpperCase(),
                                            style: TextStyle(
                                              fontSize: 15.0,
                                              letterSpacing: 1.2,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.all(12.0),
                                    ),
                                    Align(
                                      alignment: Alignment.center,
                                      child: FloatingActionButton(
                                        child: Icon(Icons.image),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(

                                child: Container(

                                  color: Colors.orange,
                                  child: false ? Text(" ") : FutureBuilder(
                                    future: getSystems(buildSectionId),
                                    builder: (BuildContext context,
                                        AsyncSnapshot systemsSnap) {
                                      if (systemsSnap.connectionState ==
                                          ConnectionState.waiting) {
                                        return Container(
                                          height: 100.0,
                                          width: 200.0,
                                          child: Text("Please wait..."),
                                        );
                                      } else if (systemsSnap.hasError) {
                                        return Container(
                                          height: 100.0,
                                          width: 200.0,
                                          child: Text("Oops! There was an error!"),
                                        );
                                      }
                                      return Row(
                                        children: <Widget>[
                                          Container(
                                             width: MediaQuery.of(context).size.width -
                                                 256.0,

                                            child: ListView.builder(
                                              shrinkWrap: true,
                                              itemCount: systemsSnap.data.length,
                                              itemBuilder: (context, index) {
                                                Map<String, dynamic> system =
                                                    systemsSnap.data[index];
                                                String systemName = system["system"];
                                                return Row(
                                                  children: <Widget>[
                                                    Container(
                                                      padding: EdgeInsets.fromLTRB(
                                                          0.0, 16.0, 0.0, 16.0),
                                                      width: 50.0, 
                                                      height: 160,
                                                      decoration: BoxDecoration(
                                                        color: Colors.yellow,
                                                        border: Border(
                                                          right: BorderSide(
                                                            color: Colors.red,
                                                            width: 1.0,
                                                          ),
                                                          bottom: BorderSide(
                                                            color: Colors.black12,
                                                            width: 1.0,
                                                          ),
                                                        ),
                                                      ),
                                                      child: Column(
                                                        children: <Widget>[
                                                          Align(
                                                            alignment:
                                                                Alignment.center,
                                                            child: RotatedBox(
                                                              quarterTurns: -1,
                                                              child: Text(
                                                                systemName
                                                                    .toUpperCase(),
                                                                style: TextStyle(
                                                                  fontSize: 15.0,
                                                                  letterSpacing: 1.2,
                                                                ),
                                                              ),
                                                            ),
                                                          ),

                                                        ],
                                                      ),
                                                    ),
                                                  ],
                                                );
                                              },
                                            ),
                                          ),
                                        ],
                                      );

                                    },
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(16.0, 16.0, 0.0, 0.0),
                  child: Column(
                    children: <Widget>[
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.photo_library),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.library_books),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.list),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10.0),
                      ),
                      Container(
                        child: FloatingActionButton(
                          child: Icon(Icons.history),
                          onPressed: () {
                            //TODO action
                          },
                        ),
                      ),
                    ],
                  ),
                ),

              ],
            ),
          ],
        ),
      ),
    );
  }
}

答案 3 :(得分:0)

诀窍是在要扩展以填充行高的某些容器中使用constraints: BoxConstraints.expand()

尝试这样的事情:

screenshot of layout

Scaffold(
      appBar: AppBar(
        title: Text("Title"),
      ),
      body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                  color: Colors.yellow,
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Container(
                            constraints: BoxConstraints.expand(),
                            color: Colors.blue,
                            child: Text("box 1")),
                      ),
                      Expanded(
                        flex: 2,
                        child: Container(
                            constraints: BoxConstraints.expand(),
                            color: Colors.red,
                            child: Column(
                              children: <Widget>[
                                Expanded(
                                  flex: 2,
                                  child: Container(
                                    padding:
                                        EdgeInsets.fromLTRB(0, 0, 0, 0),
                                    color: Colors.yellow,
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                          flex: 1,
                                          child: Container(
                                              constraints:
                                                  BoxConstraints.expand(),
                                              color: Colors.lightGreen,
                                              child: Text("box 2")),
                                        ),
                                        Expanded(
                                          flex: 2,
                                          child: Container(
                                              constraints:
                                                  BoxConstraints.expand(),
                                              color: Colors.lightBlue,
                                              child: Text("box 3")),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: Container(
                                    padding:
                                        EdgeInsets.fromLTRB(0, 0, 0, 0),
                                    color: Colors.yellow,
                                    child: Row(
                                      children: <Widget>[
                                        Expanded(
                                          flex: 1,
                                          child: Container(
                                              constraints:
                                                  BoxConstraints.expand(),
                                              color: Colors.purple,
                                              child: Text("box 4")),
                                        ),
                                        Expanded(
                                          flex: 2,
                                          child: Container(
                                              constraints:
                                                  BoxConstraints.expand(),
                                              color: Colors.orange,
                                              child: Text("")),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            )),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                  color: Colors.yellow,
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Container(
                            constraints: BoxConstraints.expand(),
                            color: Colors.yellow,
                            child: Text("box 5")),
                      ),
                      Expanded(
                        flex: 2,
                        child: Container(
                            constraints: BoxConstraints.expand(),
                            color: Colors.green,
                            child: Text("box 6")),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          )),
    );