第二节 Flutter Container容器组件的使用

才学习了 2小时不到,就发现最大的问题 ,就是一切面向widget 的嵌套然人觉得恶心.
看来以后得把所有view全部都组件化才能维护得了代码,不然这项目做完,根本不想去看了

image.png

padding,margin和decoration这几个属性。我们先来看看Padding属性。

padding属性
padding的属性就是一个内边距，它和你使用的前端技术CSS里的padding表现形式一样，指的是Container边缘和child内容的距离。先来看一个内边距为10的例子
RN 里面也是padding这个属性就是内边距的距离

child:Container(
  child:new Text('hello world),
  alignment: Alignment.topLeft,
  width:500.0,
  height:400.0,
  color: Colors.lightBlue,
  padding:const EdgeInsets.all(10.0), //这里是内边距 注意一定是浮点类型 不能写成整型 const 常量不可变的
),

//说明
padding:EdgeInsets.fromLTRB(左,上,右,底)  //其实就是对应的了left,top,right,bottom.  const 可以不写

margin属性
会了padding属性的设置，margin就变的非常容易了，因为方法基本上一样。不过margin是外边距，指的是container和外部元素的距离。

现在要把container的外边距设置为10个单位，代码如下:

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.topLeft,
  width:500.0,
  height:400.0,
  color: Colors.lightBlue,
  padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
  margin: const EdgeInsets.all(10.0),
),
//API相同不多做解释

decoration属性
decoration是 container 的修饰器，主要的功能是设置背景和边框。

比如你需要给背景加入一个渐变，这时候需要使用BoxDecoration这个类，代码如下（需要注意的是如果你设置了decoration，就不要再设置color属性了，因为这样会冲突）。

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.topLeft,
  width:500.0,
  height:400.0,
  padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
  margin: const EdgeInsets.all(10.0),
  decoration:new BoxDecoration(  //这里是设置渐变
    gradient:const LinearGradient(
      colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
    )
  ),
border:Border.all(width:2.0,color:Colors.red) //设置边框色和宽度
),

最后是页面完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController _textEditingController = new TextEditingController();

  final showText =
      '1测试数据asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdasdfasdfasdfads11112asdfasdfasdwqe222222222222222222';
  @override
  Widget build(BuildContext context) {
    gethttp();
    final size = MediaQuery.of(context).size;
    final width = size.width;
    final height = size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text('测试'),
      ),
      body: Center(
          // child: Column(
          //   children: <Widget>[
          //     TextField(
          //       controller: _textEditingController,
          //       decoration: InputDecoration(
          //         contentPadding: EdgeInsets.all(10.0),
          //         labelText: '类型',
          //         helperText: '请求'
          //       ),
          //       autofocus: false,
          //     ),
          //     RaisedButton(
          //       onPressed: (){},
          //       child: Text('选择完毕'),
          //     ),
          //     Text(
          //       showText,
          //       overflow: TextOverflow.ellipsis,
          //       maxLines: 1,
          //     ),
          //   ],
          // ),
          child: Column(
        children: <Widget>[
          new Text(
            '测试1',
            style: new TextStyle(inherit: true),
          ),
          //color颜色--fontSize字体大小--fontWeight粗细
          new Text(
            '测试2',
            style: new TextStyle(
                color: Colors.red, fontSize: 18.0, fontWeight: FontWeight.w800),
          ),
          //fontStyle斜体
          new Text('测试3',
              style:
                  new TextStyle(fontSize: 18.0, fontStyle: FontStyle.italic)),
          //letterSpacing字符间距
          new Text(
            '测试4',
            style: new TextStyle(letterSpacing: 10.0),
          ),
          //单词间距
          new Text(
            'i hit you 测试 中文',
            style: new TextStyle(wordSpacing: 30.0),
          ),
          new Text(
            '测试6',
            //style: new TextStyle(textBaseline: TextBaseline.alphabetic),)
            style: new TextStyle(
                textBaseline: TextBaseline.ideographic,
                fontSize: 25.0,
                decoration: TextDecoration.lineThrough),
          ),
          //'height: 用在Text控件上的时候，会乘以fontSize做为行高,
          new Text(
            '测试7',
            style: new TextStyle(height: 2.0),
          ),
          //decoration和decorationStyle
          new Text('测试8',
              style: new TextStyle(
                  decoration: TextDecoration.lineThrough,
                  decorationStyle: TextDecorationStyle.wavy,
                  textBaseline: TextBaseline.alphabetic,
                  shadows: [])),
          new Container(
            width: width,
            height: 200,
            padding: const EdgeInsets.all(10.0),
            margin: const EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 0.0),
            color: Colors.blue,
            
            child: new Container(
              width: 40.0,
              height: 69.0,
              padding: EdgeInsets.all(20.0),
              // alignment: Alignment.center,
              // color: Colors.red,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Colors.white,Colors.blue,Colors.orange]
                ),
                borderRadius: BorderRadius.circular(10.0),
                border:Border.all(width:2.0,color:Colors.red)
              ),
              child: new Text(
                'hello word',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.green,
                ),
                
              ),
            ),
          ),
        ],
      )),
    );
  }
}