flutter 布局

Container (只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置)

Container(
      margin: EdgeInsets.all(10.0), // 距离四周10.0
      height: 120.0,
      width: 500.0,
      // 透明黑色遮照
      decoration: BoxDecoration(
        // 弧度 4.0
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
        // 设置颜色
        color: Colors.black,
        // 边框
        border: Border.all(color: Colors.red,width: 3.0),
      ),
      child: Text("测一下"),
    );

Column / Row

//主轴方向，Column的竖向、Row我的横向
mainAxisAlignment: MainAxisAlignment.start, 
//默认是最大充满、还是根据child显示最小大小
mainAxisSize: MainAxisSize.max,
//副轴方向，Column的横向、Row我的竖向
crossAxisAlignment :CrossAxisAlignment.center,

Expanded 充满

• 例子

  
  

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: Text("FlutterDemo"),
        ),
        body: HomePageWidget(),
      ),
    );
  }
}

class HomePageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemBuilder: (context,index) {
        return RowWidget();
      },
      itemCount: 20,
    );
  }
}

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Container(
      child: Card(
        child: Padding(
          padding: EdgeInsets.only(left: 10.0,top: 10.0,right: 10.0,bottom: 10.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 10.0,bottom: 10.0),
                alignment: Alignment.topLeft,
                child: Text(
                  "这是一段描述",
                  style: TextStyle(color: Colors.black54,fontSize: 14.0),
                  maxLines: 3,overflow: TextOverflow.ellipsis,
                ),
              ),
              Padding(padding: EdgeInsets.all(10.0),),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  BootmItemWidget(icon: Icons.star,text: "1000",),
                  BootmItemWidget(icon: Icons.link,text: "1000",),
                  BootmItemWidget(icon: Icons.subject,text: "1000",),
                ],
              ),
            ],
          ),
        ),
      ),
    );

//    return Container(
//      color: Colors.white,
//      margin: EdgeInsets.all(5.0),
//      child: Column(
//        mainAxisAlignment: MainAxisAlignment.start,
//        mainAxisSize: MainAxisSize.max,
//        children: <Widget>[
//          Text("这是一段描述",style: TextStyle(color: Colors.black54,fontSize: 14.0),maxLines: 3,overflow: TextOverflow.ellipsis,),
//          Padding(padding: EdgeInsets.only(bottom: 5.0),),
//
//          Row(
//            crossAxisAlignment: CrossAxisAlignment.start,
//            children: <Widget>[
//              BootmItemWidget(icon: Icons.star,text: "1000",),
//              BootmItemWidget(icon: Icons.link,text: "1000",),
//              BootmItemWidget(icon: Icons.subject,text: "1000",),
//            ],
//          ),
//        ],
//      ),
//    );
  }
}

// 底部按钮
class BootmItemWidget extends StatelessWidget {

  final IconData icon;
  final String text;

  BootmItemWidget({Key key,this.icon,this.text}) : super(key:key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Expanded(
      flex: 1,
      // 居中显示
      child: Center(
        //横向布局
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(icon,size: 16.0,color: Colors.grey,),
            // 间隔
            Padding(padding: EdgeInsets.only(left: 5.0)),
            Text(
              text,
              style: TextStyle(color: Colors.grey,fontSize: 14.0),
              // 多余的。。。。显示
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ],
        ),
      ),
    );
  }
}