设为首页 加入收藏

TOP

Flutter学习笔记(22)--单个子元素的布局Widget(一)
2019-09-03 03:36:57 】 浏览:81
Tags:Flutter 学习 笔记 个子 元素 布局 Widget

如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget

入门学习Flutter有一段时间了,Demo用过的Widget也有不少,想着整体的梳理一下,所以今天结合Flutter中文网和书籍梳理一下Widget的使用,首先梳理一下拥有单个子元素的布局Widget。

  • Container:一个拥有绘制、定位、调整大小的Widget
  • Padding:一个Widget,会给其子Widget添加指定的填充
  • Center:将其子Widget居中显示在自身内部的Widget
  • Align:一个WIdget,它可以将其子Widget对其,并可以根据子Widget的大小自动调整大小
  • FittedBox:按自己的大小调整其子Widget的大小和位置
  • Baseline:根据子项的基准线对它们的位置进行定位的Widget
  • Offstage:一个布局Widget,可以控制其子Widget的显示和隐藏
  • LimitedBox:一个当其自身不受约束时才限制其大小的盒子
  • OverflowBox:对其子项施加不同约束的Widget,它可能允许子项溢出父级
  • SizedBox:一个特定大小的盒子,这个Widget强制它的孩子有一个特性的宽度和高度。如果宽度或高度为Null,则此Widget将调整自身大小以匹配该维度中的孩子的大小

接下来就是按照上面列出来的Widget,一个一个写Demo,每个Demo里面会有注释,还会附上效果截图

 

  • Container

import 'package:flutter/material.dart';

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'child demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('child demo'),
        ),
        body: new _containerDemo(),
      ),
    );
  }
}

class _containerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: 300.0,
      height: 200.0,
//          color: Colors.cyan,
      margin: EdgeInsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0),
      decoration: new BoxDecoration(
          color: Colors.green,//填充色
          border: new Border.all(
            color: Colors.deepOrange,//边框颜色
          ),
          borderRadius: BorderRadius.all(Radius.circular(10.0))//圆角大小
      ),
    );
  }
}

 

  • Padding

 

import 'package:flutter/material.dart';

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'child demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('child demo'),
        ),
        body: new _containerDemo(),
      ),
    );
  }
}

class _paddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Padding(
        padding: EdgeInsets.all(30.0),
        child: new Card(
          color: Colors.pink,
        ),
    );
  }
}

class _containerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: 300.0,
      height: 200.0,
//          color: Colors.cyan,
      margin: EdgeInsets.only(left: 20.0,top: 10.0,right: 0,bottom: 0),
      decoration: new BoxDecoration(
          color: Colors.green,//填充色
          border: new Border.all(
            color: Colors.deepOrange,//边框颜色
          ),
          borderRadius: BorderRadius.all(Radius.circular(10.0))//圆角大小
      ),
      child: new _paddingDemo(),
    );
  }
}

class _centerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: Text('Center Demo'),
    );
  }
}

 

  • Center

import 'package:flutter/material.dart';

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

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'child demo',
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('child demo'),
        ),
        body: new _containerDemo(),
      ),
    );
  }
}

class _containerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: 300.0,
      height: 200.0,
//          color: Colors.cyan,
      margin: EdgeInsets.o
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Okhttp3源码解析(1)-OkHttpClient.. 下一篇Okhttp3源码解析(3)-Call分析(整..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目