it营大地专栏

Flutter中实现Flex布局-Flutter Expanded实现类似Flex布局

发布于 8 个月前 作者 phonegap100 529 次浏览 最后一次编辑是 8 个月前 来自 分享

Expanded可以用在Row 和 Column布局中,可以实现类似Web中的felx布局。比如左侧固定宽度右侧自适应,或者右侧自适应左侧固定宽度。 或者跳转内部元素的比例等…

flex 元素站整个父Row /Column的比例 child 子元素

66.png

import 'package:flutter/material.dart';

import 'res/listData.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 Padding(
      padding: EdgeInsets.all(10),
      child: Row(
        // crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(flex:2,child: IconContainer(Icons.home)),  
          SizedBox(width: 10),          
          Expanded(flex: 3,child: IconContainer(Icons.search)),   
          // SizedBox(width: 10),       
          // Expanded(child: IconContainer(Icons.send))         
        ],
      ),
    )
    
     
    ;
  }
}

class IconContainer extends StatelessWidget{

  double size;  
  IconData icon;
  IconContainer(this.icon,{this.size}){
    this.size=32.0;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(      
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
      child: Center(child: Icon(this.icon,color:Colors.white,size:this.size))    
    );
  }
  
}
回到顶部