在React Native, Flutter和微信小程序中，创建列表和网格的方法各有不同。以下是各种技术中的示例代码。
- 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;- 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")),
);
},
),
),
);
}
}- 微信小程序:
列表（使用wx:for）:
<view>
<block wx:for="{{list}}" wx:key="index">
<text>{{item.text}}</text>
</block>
</view>
Page({
data: {