Question

我是新手。我正在尝试渲染一个页面的主体包含带有多个小部件的Listview。

列表视图中的

_buildOrderDetails窗口小部件是使用listview.builder（）构建的窗口小部件，其余为普通窗口小部件。

问题是页面未滚动。当正文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
          )
        ),
      )
    ]
  ),);});}}

Answer 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)),
            ),
          ],
        ),
      ),
    );
  });
}

Answer 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
                  // ....

Expanded（）小部件在ListView中不起作用

2 个答案: