Flutter水平排列的布局

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)
      ),
    );
  }
}
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页