flutter——row组件 水平布局设置

项目row0222

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar:AppBar(title:Text("row导航")),
        body:ListView(
          children: <Widget>[
            Listone(),
            Listtwo(),
            Listthree(),
          ],
        ),
      ),
    );
  }
}


//自定义列表
class Listone extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    //Row 是水平布局组件
    return Row(
      //设置数组子元素
      children: <Widget>[
        //创建按钮组件
        RaisedButton(
          onPressed: (){},
          color: Colors.blue,
          child: Text("蓝色按钮"),
          ),
        
        RaisedButton(
          onPressed: (){},
          color: Colors.green,
          child: Text("绿色按钮"),
          ),
        
        RaisedButton(
          onPressed: (){},
          color: Colors.red,
          child: Text("红色按钮"),
          ),

      ],
    );
  }
}

//自定义列表
class Listtwo extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return Row(
      children: <Widget>[
        //灵活占据位置的组件
        Expanded(
          child: RaisedButton(
            onPressed: (){},
            color: Colors.blue,
            child: Text("蓝色按钮"),
          ),
        ),
         Expanded(
          child: RaisedButton(
            onPressed: (){},
            color: Colors.green,
            child: Text("绿色按钮"),
          ),
        ),
         Expanded(
          child: RaisedButton(
            onPressed: (){},
            color: Colors.red,
            child: Text("红色按钮"),
          ),
        ),
      ],

    );
  }
}

//自定义列表
class Listthree extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return Row(
      children: <Widget>[
        //按钮，不添加灵活组件
         RaisedButton(
            onPressed: (){},
            color: Colors.blue,
            child: Text("蓝色按钮"),
          ),
        //按钮添加灵活组件
         Expanded(
          child: RaisedButton(
            onPressed: (){},
            color: Colors.green,
            child: Text("绿色按钮"),
          ),
        ),
        //按钮不添加灵活组件
         RaisedButton(
            onPressed: (){},
            color: Colors.red,
            child: Text("红色按钮"),
          ),
      ],
    );
  }
}



/**
 * Row() 水平布局组件
 * Expanded()  灵活占据位置的组件
 * RaisedButton() 按钮组件
 * 
 * 
 * 
 */