Expanded() 小部件在列表视图中不起作用答案

【问题标题】：Expanded() widget not working in listviewExpanded() 小部件在列表视图中不起作用
【发布时间】：2019-04-29 00:04:58
【问题描述】：

我是新来的颤振。我正在尝试呈现一个页面，其正文包含具有多个小部件的 Listview。

_buildOrderDetails 列表视图中的小部件是使用 listview.builder() 构建的小部件，其余是普通小部件。

问题是页面没有被滚动。当 body Listview 更改为 column 并且 _buildOrderDetails 作为子项提供给 Expanded 时，listview 会限制在页面高度的某个范围内并被滚动。但是当输入焦点时页面溢出

Widget build(BuildContext context){
return ScopedModelDescendant<MainModel>(
 builder: (BuildContext context, Widget child, MainModel model) {
  return Scaffold(
  appBar: AppBar(
    title: Text('Order Details'),
    actions: <Widget>[
      IconButton(
        onPressed: () {
          model.addNewOrder();
        },
        icon: Icon(Icons.add),
      ),
      BadgeIconButton(
        itemCount: model.ordersCount,
        badgeColor: Color.fromRGBO(37, 134, 16, 1.0),
        badgeTextColor: Colors.white,
        icon: Icon(Icons.shopping_cart, size: 30.0,),
        onPressed: () {}
      ),
    ]
  ),
  body: ListView(
    children: [
      Column(
        children: [
          _buildItemsTitle(),
          Expanded(child: _buildOrderDetails(context, model)),
        ]
      ),
      Card(
            child: Column(
              children:[
                TextField(
                  decoration: InputDecoration(
                    labelText: 'Offer Code'
                  ),
                ),
                RaisedButton(
                  onPressed: (){},
                  child: Text('Apply'),
                )
              ]
            ),
          ),
      Card(child: _orderAmount(context, model),),
      RaisedButton(
        color: Theme.of(context).accentColor,
        onPressed: (){},
        child: Text('Checkout', 
          style: TextStyle(
            fontSize: 20.0,
            color: Colors.white
          )
        ),
      )
    ]
  ),);});}}

【问题讨论】：

请在发布之前格式化您的代码，并尝试创建一个显示您的问题的最小示例，而不是仅仅粘贴任何可以帮助您的人必须整理的混乱代码。

标签： flutter flutter-layout

【解决方案1】：

尽量不要在增长项目上使用扩展。如果你想覆盖百分比/分数高度，用一个固定高度或整个高度用一个包含盒子约束的容器来包装高度，然后继续扩展或固定高度的子级。 FracionalBox 也很有帮助

在您展示的示例中，不需要展开，里面的子级将给出内容高度，SingleChildScrollView 将根据子级自动处理滚动。

Widget build(BuildContext context) {
  return ScopedModelDescendant<MainModel>(
      builder: (BuildContext context, Widget child, MainModel model) {
    return Scaffold(
      appBar: AppBar(title: Text('Order Details'), actions: <Widget>[
        IconButton(
          onPressed: () {
            model.addNewOrder();
          },
          icon: Icon(Icons.add),
        ),
        BadgeIconButton(
            itemCount: model.ordersCount,
            badgeColor: Color.fromRGBO(37, 134, 16, 1.0),
            badgeTextColor: Colors.white,
            icon: Icon(
              Icons.shopping_cart,
              size: 30.0,
            ),
            onPressed: () {}),
      ]),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Column(children: [
              _buildItemsTitle(),
              Container(child: _buildOrderDetails(context, model)),
            ]),
            Card(
              child: Column(children: [
                TextField(
                  decoration: InputDecoration(labelText: 'Offer Code'),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text('Apply'),
                )
              ]),
            ),
            Card(
              child: _orderAmount(context, model),
            ),
            RaisedButton(
              color: Theme.of(context).accentColor,
              onPressed: () {},
              child: Text('Checkout',
                  style: TextStyle(fontSize: 20.0, color: Colors.white)),
            ),
          ],
        ),
      ),
    );
  });
}

【讨论】：

【解决方案2】：

也许它可以在将来帮助某人，但诀窍似乎是：使用 ListView + LimitedBox(maxHeight) + Column ...

 ListView( 
      padding: EdgeInsets.zero,
      shrinkWrap: true,
      children: [
        FocusTraversalGroup(
          child: Form(
            key: _formKey,
            child: LimitedBox(
              maxHeight: MediaQuery.of(context).size.height,
              child: Column(
                // mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Spacer(flex: 30), // Or Expanded
                  // More Widgets...
                  Spacer(flex: 70), // Or Expanded
                  // ....

【讨论】：