在Flutter中将扩展图块与ListView一起使用 [英] Using Expansion Tile with ListView in Flutter

问题描述

我正在尝试从此图像构建应用程序，但是当我将ListView与此扩展图块放在同一页面中，屏幕将变为空白。

I'm trying to build the app from this image, but when i put the ListView in the same page with this Expansion Tile the screen become empty.

我添加了 shrinkwrap：true 并工作了，但是现在我遇到了一个新问题，当我打开ExpansionTile 或当我有 ListView上的许多选项

I added shrinkwrap: true and worked, but now I have a new problem, bottom overflowed when I open the ExpansionTile or when I have many option on ListView

以下是已尝试的代码：我将创建一个ListBuilder在

Follow is the tried code: I'll make a ListBuilder after

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

推荐答案

更新的代码没有错误-

Updated Code with no Error -

@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一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！