flutter使用ListView实现的布局

32485f0df8744f07c59da69e4aa2eb83.jpg

实现以上图的布局

class LayoutDemo extends StatefulWidget {
  const LayoutDemo({Key? key}) : super(key: key);

  @override
  State createState() => _LayoutDemoState();
}

class _LayoutDemoState extends State {
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.all(10),
        child: ListView(
          children: [
            Row(
              children: [
                Text("热搜",style: Theme.of(context).textTheme.headline6,)
              ],
            ),
            const Divider(),
            Wrap(
              spacing: 10,
              runSpacing: 5,
              children: [
                Button("第一集", onPressed: () {}),
                Button("第二二集", onPressed: () {}),
                Button("第三集", onPressed: () {}),
                Button("第四集", onPressed: () {}),
                Button("第五集", onPressed: () {}),
                Button("第六二集", onPressed: () {}),
                Button("第七集", onPressed: () {}),
                Button("第八集", onPressed: () {}),
                Button("第九二集", onPressed: () {}),
                Button("第十集", onPressed: () {}),
              ],
            ),
            const SizedBox(height: 10,),
            Row(
              children: [
                Text("历史记录",style: Theme.of(context).textTheme.headline6,)
              ],
            ),
            const Divider(),
            Column(
              children: const [
                ListTile(
                  title: Text("第一集"),
                ),
                Divider(),
                ListTile(
                  title: Text("第三集"),
                ),
                Divider()

              ],
            ),
            const SizedBox(height: 40,),
            Padding(
              padding: const EdgeInsets.all(20),
              child: OutlinedButton.icon(onPressed: (){},
                  style: ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.black38)), icon: const Icon(Icons.delete), label:const Text("清空历史记录")),
            )
          ],
        ),
    );
  }
}

学习使我开心,快乐
有没有一起学习的小伙伴们