6. Flutter中Expanded的使用

import 'package:flutter/material.dart';

main() => runApp(KSJMyApp());

class KSJMyAppextends StatelessWidget {

@override

  Widgetbuild(BuildContext context) {

return MaterialApp(

home:MyApp(),

    );

  }

}

class MyAppextends StatelessWidget {

@override

  Widgetbuild(BuildContext context) {

return Scaffold(

appBar:AppBar(

title:Text('KSJ'),

      ),

       body:KSJHomeContent(),

      floatingActionButton:FloatingActionButton(child:Icon(Icons.add), onPressed: (){

print("+++");

      }),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    );

  }

}

// 3.Expanded

/*

* Flexible中的属性

* -flex

* Expanded -> Flexible(fit: FlexFit.tight)——使用最多：关系Flexible 和 Expanded

* 空间分配问题

* Flexible: 开发中很少使用这个Widget

*

* */

class KSJHomeContentextends StatelessWidget {

@override

  Widgetbuild(BuildContext context) {

return Container(

height:300,

      child:Row(

// 固比模型的使用:必须设置 fit: FlexFit.tight,才可以使用

        mainAxisAlignment: MainAxisAlignment.start,

        crossAxisAlignment: CrossAxisAlignment.center,

        mainAxisSize: MainAxisSize.max,

        textBaseline: TextBaseline.ideographic,

        children: [

Expanded(

flex:1,

              child:Container(

width:1000,

                height:60,

                color: Colors.red,

                child:Text('KSJ你好1'),

              )),

          Expanded(

flex:2,

            child:Container(

width:200,

              height:60,

              color: Colors.green,

              child:Text('KSJ你好2'),

            ),

          ),

          Expanded(

flex:3,

            child:Container(

width:30000,

              height:60,

              color: Colors.blue,

              child:Text('KSJ你好3'),

            ),

          )

],

      ),

    );

  }

}

备注：同微信小程序的固比模型