技術胖Flutter第三季-14佈局RowWidget的詳細講解

flutter總的地址：

https://jspang.com/page/freeVideo.html

視頻地址：

https://www.bilibili.com/video/av35800108/?p=15

博客的地址：

https://jspang.com/post/flutter3.html#toc-7f3

 

建立項目的時候有個坑，解決的方法

https://www.jianshu.com/p/147f0e20c312

使用flutter create demo03建立一個新的flutter的項目

 

 

flutter upgrade能夠升級flutter的版本

 

把這個類從新打一遍：

評論說在AS裏面直接打st就會出現這些了。

 

 

 

 

裏面放了三個RaisedButton

 

後面還有空，這是不靈活的佈局

 

還有靈活的佈局

咱們把RaisedButton的外城都套一個Expanded組件。RaisedButton就是它的child部分

 

三個按鈕是平均分配的

 

 

若是想讓按鈕不平均分配 那就去掉外層套的Expanded組件就能夠了。

import 'package:flutter/material.dart';

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

class  MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'Row Widget Demo',
      home:Scaffold(
        appBar: new AppBar(
          title: new Text('水平方向佈局'),
        ),
        body:new Row(
          children: <Widget>[
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.redAccent,
              child:new Text('Red Button')
            ),),
            Expanded(child: new RaisedButton(
              onPressed: (){},
               color: Colors.orange,
              child:new Text('orange Button')
            ),),
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.lightBlue,
              child:new Text('Blue Button')
            ),),
          ],
        )
      )
    );
  }
}