Flutter水平排列的布局

最新推荐文章于 2024-10-22 16:02:22 发布

原创最新推荐文章于 2024-10-22 16:02:22 发布 · 484 阅读

0 ·

CC 4.0 BY-SA版权

Flutter学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Flutter框架实现的水平滚动城市列表示例。通过定义一个包含多个城市名称的常量数组，并在构建方法中使用ListView组件结合Axis.horizontal属性，实现了水平方向上的列表展示。每个城市名称被包装在一个具有特定样式和尺寸的Container组件中。

import 'package:flutter/material.dart';
void main() =>runApp(
  new MyApp()
);
// 在外部定义数据
const CITY_Names =['北京','田径','上海','北京','田径','上海','北京','田径','上海','北京','田径','上海','北京','田径','上海','北京','田径','上海','北京','田径','上海',];

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final title = 'Basic List';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text('title'),
        ),
        body: ListView(
        	// 控制水平排列的方向
          scrollDirection: Axis.horizontal,
          children: _buildList(),
        ),
      ),
    );
  }
  List<Widget> _buildList(){
    return CITY_Names.map((city) =>_item(city)).toList();
  }

  Widget _item(String city){
    return Container(
      //height: 80,
      width: 160,
      height: 80,
      margin: EdgeInsets.only(bottom:5,right: 10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.teal
      ),
      child: Text(
        city,
        style:TextStyle(color:Colors.white,fontSize:20)
      ),
    );
  }
}