Flutter最简单的listview例子

2022年7月9日 980点热度 0人点赞 0条评论

先上图:
Flutter最简单的listview例子插图

<code>import &#039;package:flutter/material.dart&#039;;

main(){
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(&quot;简单的ListView&quot;),
        centerTitle: true,
      ),
      body: const MyContentPage()
    );
  }
}

class MyContentPage extends StatelessWidget {
  const MyContentPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
        children: const &lt;Widget&gt;[
          MyHomePageItem(&quot;这是title_01&quot;,&quot;这是description&quot;,&quot;https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg&quot;),
          SizedBox(height: 8),
          MyHomePageItem(&quot;这是title_02&quot;,&quot;这是description&quot;,&quot;https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg&quot;),
          SizedBox(height: 8),
          MyHomePageItem(&quot;这是title_03&quot;,&quot;这是description&quot;,&quot;https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg&quot;),
        ],
      ),
    );
  }
}

class MyHomePageItem extends StatelessWidget {
  final String title;
  final String desc;
  final String imageUrl;

  const MyHomePageItem(this.title,this.desc,this.imageUrl,{Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        border: Border.all(),
      ),
      child: Column(
        children: &lt;Widget&gt;[
          Text(title),
          Text(desc),
          Image.network(imageUrl),
        ],
      ),
    );
  }
}</code>

小小调酒师

此刻打盹,你将做梦; 此刻学习,你将圆梦。 个人邮箱:shellways@foxmail.com

文章评论