Fultter列表组件

最新推荐文章于 2024-07-26 18:11:47 发布

William_Tao（攻城狮）

最新推荐文章于 2024-07-26 18:11:47 发布

阅读量289

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_45353823/article/details/107844532

版权

Flutter 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

属性

在这里插入图片描述

案例

在这里插入图片描述

import 'package:flutter/material.dart';

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

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
            subtitle: Text("THIS IS subtitle"),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
            subtitle: Text("THIS IS subtitle"),
          )
        ],
      ),
    );
  }
}

实现水平listview

在这里插入图片描述

   关键代码：scrollDirection: Axis.horizontal,

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

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

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.lightBlue,
          ),
          Container(
            width: 180,
            color: Colors.amber,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://pic.baike.soso.com/ugc/baikepic2/0/20180926123725-2140348888_png_400_400_25800.jpg/300"),
                SizedBox(height: 16.0),
                Text(
                  "这时一个文本信息",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 16.0),
                )
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.deepOrange,
          ),
          Container(
            width: 180,
            color: Colors.deepPurpleAccent,
          )
        ],
      ),
    );
  }
}