【发布时间】：2021-09-04 12:10:49
【问题描述】：
【问题讨论】：
-
试试 Flutter 网格布局 -stackoverflow.com/questions/44183795/flutter-layout-a-grid
标签： flutter
【发布时间】：2021-09-04 12:10:49
【问题描述】：
我为你做了一个演示，希望对你有所帮助。我也在代码中给你写了一些注释。
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePage createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.orange[100], // background color
child: ListView(
children: [
Container(
padding: EdgeInsets.only(left: 16.0, top: 20.0),
child: Text("All rooms", style: TextStyle(color: Colors.blue[900], fontSize: 24.0, fontWeight: FontWeight.bold)),
),
Container(
height: 200,
child: Row(
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Bed room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("4 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Living room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("2 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
],
),
),
Container(
height: 200,
child: Row(
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Kitchen", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("5 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Bathroom", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("1 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
],
),
),
Container(
height: 200,
child: Row(
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Bed room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("4 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Living room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("2 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
],
),
),
],
),
),
);
}
}
看起来是这样的：
【讨论】：
-
我认为这种组合在我们动态实现时是最好的。否则，我们会为这段冗长的重复代码感到头疼。
您可以使用以下小部件：
class MyCardItem extends StatelessWidget {
String title;
String description;
IconData iconData;
MyCardItem(this.title, this.description, this.iconData);
@override
Widget build(BuildContext context) {
return Card(
color: Colors.blue.withOpacity(0.2),
elevation: 3,
margin: EdgeInsets.all(8),
child: Column(
children: [
Icon(iconData, size:30),
Text(title, style: TextStyle(fontWeight: FontWeight.bold, color:Colors.brown),),
Text(description, style: TextStyle(color: Colors.orange),)
],
),
);
}
}
然后按如下方式使用：
MyCardItem("Bed room", "4 lights", Icons.done)
随意用图片替换图标！
【讨论】：