listview - 颤振中的自定义高度网格视图

Question

我做我的颤动应用程序。如何在颤动中使用自定义高度和重量进行网格视图？网格视图中的项目应该是矩形而不是正方形。

标签： listviewfluttergridviewflutter-layout

Answer 1

您将不得不使用 childAspectRatio。我已经通过下面的示例说明了横向和纵向模式。如果你想要一个方形网格，那么考虑使用 childAspectRatio 作为 1。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> cities = ['Kathmandu', 'Baglung', 'Pokhara'];
  var width = 100;
  var height = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          color: Colors.blueAccent,
          child: GridView.builder(
              itemCount: cities.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: MediaQuery.of(context).orientation ==
                          Orientation.landscape ? 3: 2,
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                  childAspectRatio: width / height),
              itemBuilder: (context, position) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.black,
                  child: Text(
                    cities[position],
                    style: TextStyle(color: Colors.white),
                  ),
                );
              }),
        ));
  }
}