从React Native,Flutter到小程序list，grid

在React Native, Flutter和微信小程序中，创建列表和网格的方法各有不同。以下是各种技术中的示例代码。

1. React Native:

列表（使用FlatList）:

import React from 'react';
import { FlatList, Text, View } from 'react-native';
 
const DATA = [
  { key: 'a', text: 'Alice' },
  { key: 'b', text: 'Bob' },
  // ...
];
 
const App = () => (
  <View style={{ flex: 1, paddingTop: 20 }}>
    <FlatList
      data={DATA}
      renderItem={({ item }) => <Text>{item.text}</Text>}
    />
  </View>
);
 
export default App;

网格（使用FlatList）:

import React from 'react';
import { FlatList, Text, View } from 'react-native';
 
const DATA = [...Array(20).keys()];
 
const App = () => (
  <View style={{ flex: 1, paddingTop: 20 }}>
    <FlatList
      data={DATA}
      renderItem={({ item }) => (
        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
          <Text>{item}</Text>
        </View>
      )}
      numColumns={3} // 设置网格的列数
    />
  </View>
);
 
export default App;

2. Flutter:

列表（使用ListView）:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return ListTile(title: Text("Item $index"));
          },
        ),
      ),
    );
  }
}

网格（使用GridView）:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemCount: 10,
          itemBuilder: (context, index) {
            return Container(
              color: Colors.green,
              child: Center(child: Text("Item $index")),
            );
          },
        ),
      ),
    );
  }
}

3. 微信小程序:

列表（使用wx:for）:

<view>
  <block wx:for="{{list}}" wx:key="index">
    <text>{{item.text}}</text>
  </block>
</view>

Page({
  data: {