Flutter Row水平布局组件

发布于 3 年前 作者 phonegap100 553 次浏览 最后一次编辑是 3 年前 来自 分享

1、关于Flutter Row水平布局组件

Flutter Row水平布局组件主要用于水平布局,可以实现多个组件水平排列,下面是Flutter Row水平布局组件的属性:

属性 说明
padding padding值, EdgeInsetss设置填充的值
child 子组件

2、Flutter Row水平布局组件的使用

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {    
    return  Container(
      height: 700,
      width: 500,
      color: Colors.black26,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconContainer(Icons.home,color:Colors.red),
          IconContainer(Icons.search,color:Colors.blue),
          IconContainer(Icons.send,color:Colors.orange),          
        ],
      ),
    );    
     
    
  }
}

class IconContainer extends StatelessWidget{

  double size;  
  IconData icon;
  Color color;

  IconContainer(this.icon,{this.size,this.color=Colors.blue}){
    this.size=32.0;    
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(      
      width: this.size+60,
      height: this.size+60,
      color:this.color,
      child: Center(child: Icon(this.icon,color:Colors.white,size:this.size))    
    );
  }
  
}

row.jpg

回到顶部