Flutter列小部件：不同高度的子项

Question

我正在尝试创建一个小型测试应用程序，该应用程序具有较大的中央区域，在该区域上我将渲染图像，而较小的底部区域将包含小部件的水平可滚动列表。这是代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:isolate';    
import 'package:fluttertoast/fluttertoast.dart';    
import 'package:photo_app_ui_test/fxmanager/fx_manager.dart';

////    
void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

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

class _SampleAppPageState extends State<SampleAppPage> {
  FxManager fxManager;
  bool      showLoadingDialog = true;

  @override
  void initState() {
    super.initState();
    //loadData();
    fxManager = FxManager();
    fxManager.init().then( (dynamic) => initInterface() );
  }


  void initInterface(){
    setState(() {
      showLoadingDialog = false;
    });
  }

  getBody() {
    if (showLoadingDialog) {
      return getProgressDialog();
    } else {
      return getEffectsWidget();//getListView();
    }
  }

  getProgressDialog() {
    return Center(child: CircularProgressIndicator());
  }

  getEffectsWidget() {
    return

      Column(
          children: <Widget>[

            Expanded(child: Container(color: Color.fromARGB(255, 255, 0, 0),
                child: Center(child: Text("Image")))),
            Flexible( child: Container(
                color: Color.fromARGB(255, 0, 255, 0),
                child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: _getListData()
                )))
          ]);
  }

  _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(Padding(
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              /*
              Expanded(
                child: Container(),
              ),*/
              FlatButton(
                  onPressed: () => {},
                  color: Colors.orange,
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    // Replace with a Row for horizontal icon + text
                    children: <Widget>[Icon(Icons.add), Text("Add")],
                  )),
            ],
          )));
    }
    return widgets;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Sample App"),
        ),
        body: getBody());
  }


}

产生此结果：

我想使绿色框的高度尽可能小：

如果ListView小部件是Column小部件的直接子级，则抛出通常的Horizontal viewport was given unbounded height异常。所以我必须将其嵌入Flexible或Expanded中。

Answer 1

所需的输出：

getEffectsWidget() {
    return Column(children: <Widget>[
      Expanded(
          child: Container(
              color: Color.fromARGB(255, 255, 0, 0),
              child: Center(child: Text("Image")))),

       Container(
            color: Color.fromARGB(255, 0, 255, 0),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: _getListData(),
              ),
            ),
      )
    ]);
  }

static _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(Padding(
          padding: EdgeInsets.only(right: 10.0), 
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              /*
              Expanded(
                child: Container(),
              ),*/
              FlatButton(
                  onPressed: () => {},
                  color: Colors.orange,
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    // Replace with a Row for horizontal icon + text
                    children: <Widget>[Icon(Icons.add), Text("Add")],
                  )),
            ],
          )));
    }
    return widgets;
  }