才學(xué)習(xí)了 2小時(shí)不到,就發(fā)現(xiàn)最大的問題 ,就是 一切面向widget 的嵌套然人覺得惡心.
看來以后得把所有view全部都組件化 才能維護(hù)得了代碼,不然這項(xiàng)目做完,根本不想去看了

image.png

padding,margin和decoration這幾個(gè)屬性。我們先來看看Padding屬性。

padding屬性
padding的屬性就是一個(gè)內(nèi)邊距，它和你使用的前端技術(shù)CSS里的padding表現(xiàn)形式一樣，指的是Container邊緣和child內(nèi)容的距離。先來看一個(gè)內(nèi)邊距為10的例子
RN 里面也是padding這個(gè)屬性 就是內(nèi)邊距的距離

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), //這里是內(nèi)邊距 注意一定是浮點(diǎn)類型 不能寫成整型 const 常量不可變的
),

//說明
padding:EdgeInsets.fromLTRB(左,上,右,底)  //其實(shí)就是對(duì)應(yīng)的了left,top,right,bottom.  const 可以不寫

margin屬性
會(huì)了padding屬性的設(shè)置，margin就變的非常容易了，因?yàn)榉椒ɑ旧弦粯?。不過margin是外邊距，指的是container和外部元素的距離。

現(xiàn)在要把container的外邊距設(shè)置為10個(gè)單位，代碼如下:

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 的修飾器，主要的功能是設(shè)置背景和邊框。

比如你需要給背景加入一個(gè)漸變，這時(shí)候需要使用BoxDecoration這個(gè)類，代碼如下（需要注意的是如果你設(shè)置了decoration，就不要再設(shè)置color屬性了，因?yàn)檫@樣會(huì)沖突）。

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(  //這里是設(shè)置漸變
    gradient:const LinearGradient(
      colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
    )
  ),
border:Border.all(width:2.0,color:Colors.red) //設(shè)置邊框色和寬度
),

最后是頁(yè)面完整代碼

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測(cè)試數(shù)據(jù)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('測(cè)試'),
      ),
      body: Center(
          // child: Column(
          //   children: <Widget>[
          //     TextField(
          //       controller: _textEditingController,
          //       decoration: InputDecoration(
          //         contentPadding: EdgeInsets.all(10.0),
          //         labelText: '類型',
          //         helperText: '請(qǐng)求'
          //       ),
          //       autofocus: false,
          //     ),
          //     RaisedButton(
          //       onPressed: (){},
          //       child: Text('選擇完畢'),
          //     ),
          //     Text(
          //       showText,
          //       overflow: TextOverflow.ellipsis,
          //       maxLines: 1,
          //     ),
          //   ],
          // ),
          child: Column(
        children: <Widget>[
          new Text(
            '測(cè)試1',
            style: new TextStyle(inherit: true),
          ),
          //color顏色--fontSize字體大小--fontWeight粗細(xì)
          new Text(
            '測(cè)試2',
            style: new TextStyle(
                color: Colors.red, fontSize: 18.0, fontWeight: FontWeight.w800),
          ),
          //fontStyle斜體
          new Text('測(cè)試3',
              style:
                  new TextStyle(fontSize: 18.0, fontStyle: FontStyle.italic)),
          //letterSpacing字符間距
          new Text(
            '測(cè)試4',
            style: new TextStyle(letterSpacing: 10.0),
          ),
          //單詞間距
          new Text(
            'i hit you 測(cè)試 中文',
            style: new TextStyle(wordSpacing: 30.0),
          ),
          new Text(
            '測(cè)試6',
            //style: new TextStyle(textBaseline: TextBaseline.alphabetic),)
            style: new TextStyle(
                textBaseline: TextBaseline.ideographic,
                fontSize: 25.0,
                decoration: TextDecoration.lineThrough),
          ),
          //'height: 用在Text控件上的時(shí)候，會(huì)乘以fontSize做為行高,
          new Text(
            '測(cè)試7',
            style: new TextStyle(height: 2.0),
          ),
          //decoration和decorationStyle
          new Text('測(cè)試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,
                ),
                
              ),
            ),
          ),
        ],
      )),
    );
  }
}