Flutter的ListView（靜態列表）

七七喜欢你發表於2024-03-08
FlutterView

1.多文字情況

code 
class vertical1 extends StatelessWidget {
  const vertical1({super.key});

  @override
  Widget build(BuildContext context) {
    return  ListView(
      children:const<Widget>[
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ],
    );
  }
}
遇到了問題：

在column下直接引入ListView會丟擲異常報錯，不顯示內容，原因是主要是因為你試圖將一個 ListView 直接放置在 Column 中，而沒有給它一個明確的大小。
在Flutter中，ListView 是一個滾動元件，它需要知道自己的大小才能正確地滾動內容。當你把它放在 Column 中時，由於 Column 本身是試圖讓其子元件佔用儘可能多的空間（在垂直方向上），這就導致了 ListView 沒有一個明確的界限。由於 ListView 沒有被分配具體的大小，它就無法被正確佈局，從而導致了這個錯誤。
解決方法是為 ListView 提供一個明確的大小。這通常透過將 ListView 放在 Expanded 或 Flexible 元件中來實現，或者使用 SizedBox 來指定大小。這樣，ListView 就有了一個明確的大小，並能夠被正確地佈局和渲染。

Scaffold(
        appBar: AppBar(title: Text("垂直列表"),),
        body: const Column(children: [
          //只有文字
          Expanded(child: vertical1()),
          SizedBox(height: 20,),
）

2.Icon+Text

View Code 
class vertical2 extends StatelessWidget {
  const vertical2({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children:const <Widget>[
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
      ],
    );
  }
}

3.Image+title+subtitle

code 

class vertical3 extends StatelessWidget {
  const vertical3({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        
      ],
    );
  }
}

4.Image+Text

View Code 
class vertical4 extends StatelessWidget {
  const vertical4({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: [
        Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),
      Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 50,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 5),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 5, 0, 10),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),
      ],
      

    );
  }
}

5.水平列表

View Code 
class vertical5 extends StatelessWidget {
  const vertical5({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 180,
      
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          Container(
            width: 180,
            color: Colors.red,
          ),
          Container(
            width: 180,
            color: Colors.yellow,
            child: Column(
              children: [
                Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png",
                fit: BoxFit.cover,),
                Text("這是一張圖片"),
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.orange,
          ),
          Container(
            width: 180,
            color: Colors.black,
          ),

        ],
      ),
    );
  }
}

所有程式碼：

//LsitView 
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("垂直列表"),),
        body: const Column(children: [
          //只有文字
          // Expanded(child: vertical1()),
          // SizedBox(
          //   height: 200,
          //   width:200,
          //   child:vertical1()),
          // SizedBox(
          //   height: 200,
          //   width:200,
          //   child:vertical2()),
          // SizedBox(height: 20,),
          //  SizedBox(
          //   height: 500,
          //   width:500,
          //   child:vertical3()),
          // SizedBox(height: 20,),
          // SizedBox(
          //   height: 600,
          //   width:1000,
          //   child:vertical4()),
          // SizedBox(height: 20,),
          SizedBox(
            height: 200,
            width:500,
            child:vertical5()),
          SizedBox(height: 20,),
         
        ]),
        ),
    );
  }
}

class vertical1 extends StatelessWidget {
  const vertical1({super.key});

  @override
  Widget build(BuildContext context) {
    return  ListView(
      children:const<Widget>[
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ListTile(title: Text("Flutter 列表元件"),),
        Divider(height: 10,),
        ],
    );
  }
}


class vertical2 extends StatelessWidget {
  const vertical2({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children:const <Widget>[
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
        ListTile(
          leading: Icon(Icons.access_alarms),
          title: Text("全部訂單"),
        ),
      ],
    );
  }
}


class vertical3 extends StatelessWidget {
  const vertical3({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045510596-2026591545.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        ListTile(
          leading: Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png"),
          title:const Text("FlutterFlutterFlutterFlutterFlutterFlutterFlutter"),
          subtitle: const Text("datadatadatadatadatadatadatadatadatadata"),
        ),
        
      ],
    );
  }
}


class vertical4 extends StatelessWidget {
  const vertical4({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: [
        Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),
      Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 50,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 5),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),Image.network("https://portal-oss.zhiye.com/606179/image/54446b87-fc31-46d6-8847-129206f3f56f.jpg"),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 5, 0, 10),
          child:const Text("這是第一張圖片",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Colors.black87,
            ),
          ),
        ),
      ],
      

    );
  }
}


class vertical5 extends StatelessWidget {
  const vertical5({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 180,
      
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          Container(
            width: 180,
            color: Colors.red,
          ),
          Container(
            width: 180,
            color: Colors.yellow,
            child: Column(
              children: [
                Image.network("https://img2024.cnblogs.com/blog/2666697/202403/2666697-20240308045525777-1050348584.png",
                fit: BoxFit.cover,),
                Text("這是一張圖片"),
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.orange,
          ),
          Container(
            width: 180,
            color: Colors.black,
          ),

        ],
      ),
    );
  }
}

相關文章