Question

我正在尝试在颤动中布置一个4x4网格的瓷砖。我设法用列和行来做。但现在我找到了GridView组件。任何人都可以提供一个如何使用它的例子吗？

我无法真正地围绕着文档。我似乎没有得到我想要的结果。

谢谢：）

Answer 1

GridView用于实施材料grid lists。如果您知道自己拥有固定数量的项目并且数量不多（16个就可以了），则可以使用GridView.count。但是，您应该注意GridView是可滚动的，如果这不是您想要的，那么只使用行和列可能会更好。

import 'dart:collection';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Grid Demo'),
      ),
      body: new GridView.count(
        crossAxisCount: 4,
        children: new List<Widget>.generate(16, (index) {
          return new GridTile(
            child: new Card(
              color: Colors.blue.shade200,
              child: new Center(
                child: new Text('tile $index'),
              )
            ),
          );
        }),
      ),
    );
  }
}

Answer 2

将图像加载到图块中的简单示例。

//Compose Email Message

func configuredMailComposedViewController() -> MFMailComposeViewController {

    let mailComposerVC = MFMailComposeViewController()
    mailComposerVC.mailComposeDelegate = self
    mailComposerVC.setToRecipients([(Auth.auth().currentUser?.email)!])
    mailComposerVC.setSubject("Hey! I saw you on Spaide. Looking to connect.")
    mailComposerVC.setMessageBody("Hey there! I had a few questions and was hoping you could help.", isHTML: false)

    return mailComposerVC
}

Flutter Gallery应用程序包含一个真实世界的示例，可以找到here。

Answer 3

使用任何适合您的需求。

GridView.count(...)

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

GridView.builder(...)

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (_, index) => FlutterLogo(),
  itemCount: 4,
)

GridView(...)

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

GridView.custom(...)

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  childrenDelegate: SliverChildListDelegate(
    [
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
      FlutterLogo(),
    ],
  ),
)

GridView.extent(...)

GridView.extent(
  maxCrossAxisExtent: 400,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
    FlutterLogo(),
  ],
)

输出（全部相同）：

Answer 4

请访问此repo。

 #include <vector>
 #include <iostream>

 using namespace std;

int threeSum(const vector<int>& nums, int threshold); 

int main() {
int threshold = 7;
vector<int> nums = {1,2,4,6};
int result = threeSum(nums, threshold);
cout << result;
}

int threeSum(const vector<int>& nums, int threshold)
{
if (nums.size() < 3)
    return 0;

int count = 0;      
for (unsigned int i = 0; i < nums.size() - 2; i++)
{
    if (nums[i] < nums[i+1] && nums[i+1] < nums[i+2]
        && nums[i] + nums[i+1] + nums[i+2] <= threshold)
    {
        count += 1;
    }
}
return count;
}

下面的屏幕快照包含 crossAxisCount：2

Answer 5

GridView中针对不同情况的命名构造函数很少，

构造函数

GridView
GridView.builder
GridView.count
GridView.custom
GridView.extent

下面是GridView构造函数的示例：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: ExampleGrid(),
  ),
);

class ExampleGrid extends StatelessWidget {
  List<String> images = [
    "https://uae.microless.com/cdn/no_image.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/81aF3Ob-2KL._UX679_.jpg",
    "https://www.boostmobile.com/content/dam/boostmobile/en/products/phones/apple/iphone-7/silver/device-front.png.transform/pdpCarousel/image.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUgs8_kmuhScsx-J01d8fA1mhlCR5-1jyvMYxqCB8h3LCqcgl9Q",
    "https://ae01.alicdn.com/kf/HTB11tA5aiAKL1JjSZFoq6ygCFXaw/Unlocked-Samsung-GALAXY-S2-I9100-Mobile-Phone-Android-Wi-Fi-GPS-8-0MP-camera-Core-4.jpg_640x640.jpg",
    "https://media.ed.edmunds-media.com/gmc/sierra-3500hd/2018/td/2018_gmc_sierra-3500hd_f34_td_411183_1600.jpg",
    "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/16q1/665019/2016-chevrolet-silverado-2500hd-high-country-diesel-test-review-car-and-driver-photo-665520-s-original.jpg",
    "https://www.galeanasvandykedodge.net/assets/stock/ColorMatched_01/White/640/cc_2018DOV170002_01_640/cc_2018DOV170002_01_640_PSC.jpg",
    "https://media.onthemarket.com/properties/6191869/797156548/composite.jpg",
    "https://media.onthemarket.com/properties/6191840/797152761/composite.jpg",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView(
        physics: BouncingScrollPhysics(), // if you want IOS bouncing effect, otherwise remove this line
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),//change the number as you want
        children: images.map((url) {
          return Card(child: Image.network(url));
        }).toList(),
      ),
    );
  }
}

如果您希望GridView项根据内容是动态的，则可以执行几行，但这是使用StaggeredGridView包的最简单方法。我提供了示例here的答案。

以下是GridView.count的示例：

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: ExampleGrid(),
      ),
    );

class ExampleGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 4,
        children: List.generate(40, (index) {
          return Card(
            child: Image.network("https://robohash.org/$index"),
          ); //robohash.org api provide you different images for any number you are giving
        }),
      ),
    );
  }
}

以上代码段的屏幕截图：

SliverGridView的示例：

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: ExampleGrid(),
      ),
    );

class ExampleGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        primary: false,
        slivers: <Widget>[
          SliverPadding(
            padding: const EdgeInsets.all(20.0),
            sliver: SliverGrid.count(
              crossAxisSpacing: 10.0,
              crossAxisCount: 2,
              children: List.generate(20, (index) {
                return Card(child: Image.network("https://robohash.org/$index"));
              }),
            ),
          ),
        ],
      )
    );
  }
}

Answer 6

使用行和列，您可以创建任何类型的布局：http://www.yourowncodes.com/flutter-understanding-layouts-rows-columns-design/

颤动 - 布置网格

6 个答案: