flutter之GridView网格布局

先看GridView传参

GridView({
    super.key,
    super.scrollDirection,
    super.reverse,
    super.controller,
    super.primary,
    super.physics,
    super.shrinkWrap,
    super.padding,
    required this.gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    super.cacheExtent,
    List<Widget> children = const <Widget>[],
    int? semanticChildCount,
    super.dragStartBehavior,
    super.clipBehavior,
    super.keyboardDismissBehavior,
    super.restorationId,
  }) 

横纵向列表具体实现:

import 'package:flutter/material.dart';

const CITY_LIST = [
  '日本',
  '台湾',
  '秦皇岛',
  '宁波',
  '青岛',
  '北京',
  '澳门',
  'honggong',
  '日本',
  '台湾',
  '秦皇岛',
  '宁波',
  '青岛',
  '北京',
  '澳门',
  'honggong',
  '青岛',
  '北京',
  '澳门',
  'honggong',
];

class SeachPage extends StatefulWidget {
  @override
  _SeachPageState createState() => _SeachPageState();
}

class _SeachPageState extends State<SeachPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: const Text('city'),
        ),
        body: GridView.count(
          crossAxisCount: 3,  //每行个数
          children: _childList(),
        ));
  }

  List<Widget> _childList() {
    return CITY_LIST.map((city) => _item(city)).toList();
  }
}

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

小结

这里只是简单使用,要相了解更多以此为引,快去探索吧

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容