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)
      ),
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值