水平布局组件

 

水平布局组件

 

 

import 'package:flutter/material.dart'; import 'res/listData.dart';
void main() {   runApp(MyApp()); }
class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(         home: Scaffold(       appBar: AppBar(title: Text("flutterDemo")),       body: HomeContent(),     ));   } }
class HomeContent extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Container(       height: 800.0,       width: 400.0,       color: Colors.blue.shade300,       child: Row(         // 主轴的排列顺序         mainAxisAlignment: MainAxisAlignment             .spaceEvenly, // start spaceEvenly center spaceAround spaceBetween         crossAxisAlignment: CrossAxisAlignment.start, // start end stretch         children: [           IconContainer(Icons.search, Colors.blue, 35.0),           IconContainer(Icons.home, Colors.orange, 35.0),           IconContainer(Icons.pages, Colors.red, 35.0),         ],       ),     );   } }
class IconContainer extends StatelessWidget {   IconData icon;   Color color = Colors.red;   double size;
  IconContainer(this.icon, this.color, this.size);
  @override   Widget build(BuildContext context) {     return Container(       height: 100.0,       width: 100.0,       color: this.color,       child: Center(         child: Icon(           this.icon,           size: this.size,           color: Colors.white,         ),       ),     );   } }
上一篇:javascript删除数组元素的新方法


下一篇:《图解Vue3.0》- 第10节 组件注册与使用