如何进行flutter布局开发？

1、

2、

RenderObjectWidget:它主要提供了一些如何去约束它里面的布局的一些配置。

它有两个比较重要的实现，一个是SingleChildRenderObjectWidget，另一个是MultiChildRenderObjectWidget.

 

 

SingleChildRenderObjectWidget:单节点的一个组件

Opacity   [əʊˈpæsəti]   ：用来改变透明度的一个组件

ClipOval:将布局裁剪成圆形的一个组件

ClipRRect:裁剪成方形的一个组件

PhysicalModel:将布局显示成不同的形状的一个组件

Align：（如Center,将布局进行居中）

Padding：设置布局内边距

SizedBox：用来约束布局的大小

FractionallySizedBox:可以约束里面的布局垂直方向或者水平方向的伸展，也就是说它可以把布局垂直方向或者水平方向充满整个屏幕，它是一个可以约束它里面的组件可以撑多大的一个组件

 

ClipOval:将布局裁成圆形

 

 

ClipRRect:裁成方形    Opacity:设置透明度

 

 

PhysicalModel:将布局显示成不同的组件

boderRadius:裁剪布局的四个角，裁剪为圆角

 

 

FractionallySizedBox:可以约束里面的布局垂直方向或者水平方向的伸展，也就是说它可以把布局垂直方向或者水平方向充满整个屏幕，它是一个可以约束它里面的组件可以撑多大的一个组件

不添加FractionallySizedBox时，Text只是按它的内容填满了

使用FractionallySizedBox以后：

 

 

 

MultiChildRenderObjectWidget:多节点的一个组件

Stack:相当于Android的FrameLayout,它里面的布局都是一个叠一个，后面的布局会覆盖前面的布局

Flex：有两个重要的实现，Column和Row。Column：y轴。垂直方向上从上到下的一个组件。    Row：x轴。水平方向，从左到右的水平方向的一个组件。

Wrap：和Row组件很像，它们都是从左到右排列的布局。不同之处在于Wrap可以换行。

Flow：Flow组件用起来不是很方便，所以它很少遇到。

 

Column:纵向排列布局   Row:横向排列布局

 

 

Stack:相当于Android的FrameLayout,它里面的布局都是一个叠一个，后面的布局会覆盖前面的布局

 

 

Wrap：和Row组件很像，它们都是从左到右排列的布局。不同之处在于Wrap可以换行。

 

3、

ParentDataWidget:它有两个比较重要的实现，一个是Positioned，一个是Flexible

Positioned：用于固定View的一个位置的一个组件，通常与Stack进行搭配使用

Flexible:它有一个非常重要的实现Expanded，就是在父容器中能够展开多大大小的一个组件

 

Positioned：用于固定View的一个位置的一个组件，通常与Stack进行搭配使用

第二张图片位于第一张图片的左下方

 

 

 

Flexible:它有一个非常重要的实现Expanded，就是在父容器中能够展开多大大小的一个组件

不使用Expanded之前，只能按内容填充高度

因为Column是纵向的，所以就会在y轴填充满屏幕

4、

import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';

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


//如何进行Flutter布局开发？
class FlutterLayoutPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState()  => _FlutterLayoutGroupPage();
}

class _FlutterLayoutGroupPage extends State<FlutterLayoutPage>{
  int _currentIndex=0;
  Future<Null> _handleRefresh()async{
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }

  _item(String title,Color color){
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: color),
      child: Text(title,style: TextStyle(fontSize: 22,color:Colors.white)),
    );
  }

  _chip(String label){
    return Chip(label: Text(label),
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: Text(
          label.substring(0,1),
          style: TextStyle(fontSize: 10),
        ),
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);

    return MaterialApp(
      title: '如何进行Flutter布局开发？',
      theme: ThemeData(

        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('如何进行Flutter布局开发？')),
        bottomNavigationBar: BottomNavigationBar(
          //默认选中第0个
          currentIndex: _currentIndex,
            onTap: (index){
              setState(() {
                //当点击后回调该方法，改变点击的index
                _currentIndex=index;
              });
            },
            items:[
          BottomNavigationBarItem(
              icon: Icon(Icons.home,color: Colors.grey),
              activeIcon: Icon(Icons.home,color: Colors.blue),
              title:Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.list,color: Colors.grey),
              activeIcon: Icon(Icons.list,color: Colors.blue),
              title:Text('列表')
          )
        ]),
        floatingActionButton: FloatingActionButton(
          onPressed: null,
          child: Text('点我')
        ),

        body: _currentIndex==0?
        RefreshIndicator(
            child:
            ListView(
                children: <Widget>[
                  Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  ClipOval(
                    child: SizedBox(
                      width: 100,
                      height: 100,
                      child:  Image.network('http://www.devio.org/img/avatar.png'
                    ),
                  )
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: ClipRRect(
                      borderRadius:BorderRadius.all(Radius.circular(10)),//圆角
                      child: Opacity(opacity: 0.6,
                        child: Image.network('http://www.devio.org/img/avatar.png',
                          width: 100,
                          height: 100,
                        )
                      ),
                    ),
                  ),
                  Text("横向 Row"),
                ],
              ),

              //网上加载图片
              Image.network('http://www.devio.org/img/avatar.png',
              width: 100,
              height: 100,),
              TextField(
                //输入文本的样式
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
                  hintText: '请输入',
                  hintStyle: TextStyle(fontSize: 15)
                ),
              ),
              Container(
                height: 100,
                margin: EdgeInsets.all(10),
//                decoration: BoxDecoration(color: Colors.lightBlueAccent),
                child:
                  PhysicalModel(color: Colors.transparent,
                  borderRadius: BorderRadius.circular(6),
                  clipBehavior: Clip.antiAlias,//抗锯齿
                    child:
                    PageView(
                      children: <Widget>[
                        _item("Page1", Colors.deepPurple),
                        _item("Page2", Colors.green),
                        _item("Page3", Colors.red),
                      ],
                    ),
                  )
              ),
              Column(
                children: <Widget>[
                  FractionallySizedBox(
                    widthFactor: 1,
                    child:  Container(
                      decoration: BoxDecoration(color: Colors.greenAccent),
                      child: Text('宽度撑满'),
                    )
                  ),
                ],
              ),
            ],
          ),
        ),
         Stack(
           children: <Widget>[
         Image.network('http://www.devio.org/img/avatar.png',
           width: 100,
           height: 100,
         ),
             Positioned(
               left: 0,
               bottom: 0,
               child: Image.network('http://www.devio.org/img/avatar.png',
               width: 36,
               height: 36,
             ),
             )
         ],
         ),
         Wrap(
           //创建一个wrap布局，从左向右进行排列，会自动换行
           spacing: 8,//水平间距
           runSpacing: 6,//垂直间距
           children: <Widget>[
             _chip("Flutter"),
             _chip("进阶"),
             _chip("实战"),
             _chip("携程"),
             _chip("App"),
           ],
         )

                ]
            ),
            onRefresh: _handleRefresh)
       :Column(
          children: <Widget>[
            Text("列表"),
            Expanded(
              child:  Container(
                decoration: BoxDecoration(
                    color: Colors.red
                ),
                child: Text('拉伸填满高度'),
              )
            )

          ],
        )

      ),
    );


  }

}

//StateLessWidget与基础组件
class LessGroupPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);
    return MaterialApp(
      title: 'StatelessWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget与基础组件')),
        body: Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Text('I am an Text',style: textStyle),
              Icon(Icons.android,size: 50,color: Colors.red),
              CloseButton(),
              BackButton(),
              Chip(
              //材料设计中一个非常有趣的小部件
                avatar: Icon(Icons.people),
                label: Text('StatelessWidget与基础组件'),
              ),
              Divider(
                height: 10,//容器高度，不是线的高度
                indent: 10,//左侧间距
                color: Colors.orange
              ),
              Card(
                color: Colors.red,
                elevation: 5,//阴影
                margin: EdgeInsets.all(10),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text('I am Card',style: textStyle,),
                ),
              ),
              AlertDialog(
                title: Text('盘它'),
                content: Text('你这个糟老头子坏得很'),
              )
            ],
          ),
        ),
      ),
    );
  }
}