先看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,
  }) 

橫縱向列表具體實(shí)現(xiàn)：

import 'package:flutter/material.dart';

const CITY_LIST = [
  '日本',
  '臺(tái)灣',
  '秦皇島',
  '寧波',
  '青島',
  '北京',
  '澳門',
  'honggong',
  '日本',
  '臺(tái)灣',
  '秦皇島',
  '寧波',
  '青島',
  '北京',
  '澳門',
  '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,  //每行個(gè)數(shù)
          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),
      ));
}

小結(jié)

這里只是簡單使用，要相了解更多以此為引，快去探索吧