Question

我正在尝试从此image构建应用程序，但是当我将ListView与此Expansion Tile放在同一页面时，屏幕变为空白。

我添加了shrinkwrap: true并开始工作，但是现在我遇到了一个新问题，当我open the ExpansionTile或拥有many option on ListView时，底部溢出了

下面是尝试的代码：之后，我将创建一个ListBuilder

    class HomeState extends State<Teste>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text (""),
      ),
        body: Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
              CardList(),
              MyList()
            ],
          ),
        ),
    );
  }
}

Widget CardList(){
  return new Flexible(
      child: Card(
        child: ExpansionTile(
          title: Text("Periodo",
            style: new TextStyle(
            ),textAlign: TextAlign.center,
          ),
          children: <Widget>[
            ListTile(
              title: Text("Periodo 1",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 2",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 3",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 4",textAlign: TextAlign.center,),
            ),
            ListTile(
              title: Text("Periodo 5",textAlign: TextAlign.center,),
            ),ListTile(
              title: Text("Periodo 6",textAlign: TextAlign.center,),
            ),ListTile(
              title: Text("Periodo 7",textAlign: TextAlign.center,),
            ),ListTile(
              title: Text("Periodo 8",textAlign: TextAlign.center,),
            ),
          ],
        ),
      )
  );
}

Widget MyList(){
  return new ListView(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    children: <Widget>[
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
      Divider(),
      ListTile(title: Text("Teste",textAlign: TextAlign.center,),),
    ],
  );
}

Answer 1

更新的代码没有错误-

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
      ),
      body: Container(
        padding: EdgeInsets.all(15.0),
        child: Column(
          children: <Widget>[Flexible(child: CardList()), Flexible(child: MyList())],
        ),
      ),
    );
  }
}

Widget CardList() {
  return SingleChildScrollView(
    child: Card(
      child: ExpansionTile(
        title: Text(
          "Periodo",
          style: new TextStyle(),
          textAlign: TextAlign.center,
        ),
        children: <Widget>[
          ListTile(
            title: Text(
              "Periodo 1",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 2",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 3",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 4",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 5",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 6",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 7",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 8",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 9",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 10",
              textAlign: TextAlign.center,
            ),
          ),
          ListTile(
            title: Text(
              "Periodo 11",
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    ),
  );
}

Widget MyList() {
  return new ListView(
    shrinkWrap: true,
    children: <Widget>[
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
      Divider(),
      ListTile(
        title: Text(
          "Teste",
          textAlign: TextAlign.center,
        ),
      ),
    ],
  );
}

在Flutter中将扩展图块与ListView一起使用

1 个答案: