flutter 學習筆記-容器與佈局（1）

佈局

Widget	對應的Element	用途
LeafRenderObjectWidget	LeafRenderObjectElement	Widget樹的葉子節點，用於沒有子節點的widget，通常基礎元件都屬於這一類，如Image。
SingleChildRenderObjectWidget	SingleChildRenderObjectElement	包含一個子Widget，如：ConstrainedBox、DecoratedBox等
MultiChildRenderObjectWidget	MultiChildRenderObjectElement	包含多個子Widget，一般都有一個children引數，接受一個Widget陣列。如Row、Column、Stack等

Row、Column、Container、Expanded、Flex、DefaultTextStyle、SizeBox、Padding

• Row 橫排，對齊方法 CrossAxisAlignment，類似flex
• Column 縱排
• Container 為SingleChildRenderObjectWidget 只有一個child，類似div
• Expanded 擴充套件 Row、Column、Container高度和寬度為100%
• Flex 配合Expanded設定flex比例
• DefaultTextStyle 的style引數可以設定所有文筆顏色樣式
• SizeBox 可以設定容器的大小，Containe 類似
• Padding

import 'dart:async';
import 'dart:ffi';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'view/header.dart';

void main() {
  debugPaintSizeEnabled = true;
  //debugPaintSizeEnabled=true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  int num = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "piccre", home: MyHomePage(title: "Home"));
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  App createState() => App();
}

class App extends State {
  bool switchState = true;
  FocusNode fn = new FocusNode();
  FocusNode pw = new FocusNode();
  TextEditingController tec = TextEditingController(text: "test");
  GlobalKey forms = new GlobalKey<FormState>();
  final sizeBox = DefaultTextStyle(style:TextStyle(color:Colors.deepOrange,fontSize:16),child: SizedBox(
    height: 200,
    child: Flex(direction: Axis.horizontal, children: <Widget>[
      Expanded(
          flex: 1,
          child: Container(width: 100, child: Text("test1"))),
      Expanded(
          flex: 1,
          child: Container(width: 100, child: Text("test2"))),
      Expanded(
          flex: 1,
          child: Container(width: 100, child: Text("test2"))),
      Expanded(
          flex: 1,
          child: Container(width: 100, child: Text("test2"))),
      Expanded(
          flex: 1,
          child: Container(width: 100, child: Text("test2"))),
      Expanded(
          flex: 1,
          child: Container(width: 100, child: Text("test2"))),
      Expanded(
          flex: 1,
          child: Container(width: 100, child: Text("test2"))),
    ]),
  ));
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
            title: Text("picc", textAlign: TextAlign.center),
            centerTitle: true),
        body: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[

              sizeBox,
              Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Form(
                    key: forms,
                    autovalidate: true, //開啟自動校驗
                    child: Column(children: <Widget>[
                      TextFormField(
                        focusNode: fn,
                        controller: tec,
                        //autofocus:true,
                        decoration: InputDecoration(
                            labelText: '姓名',
                            hintText: '請輸入姓名',
                            prefixIcon: Icon(Icons.account_circle)),
                        onChanged: (val) {
                          print(val);
                        },
                        validator: (v) {
                          print(v);
                          return "test1";
                        },
                      ),
                      TextFormField(
                        //autofocus:true,
                        focusNode: pw,
                        decoration: InputDecoration(
                            labelText: '密碼',
                            hintText: '請輸入密碼',
                            prefixIcon: Icon(Icons.keyboard)),
                        validator: (val) {
                          return "test2";
                        },
                      ),
                      RaisedButton(
                          padding: EdgeInsets.all(10.0),
                          child: Text("登入"),
                          color: Theme.of(context).primaryColor,
                          textColor: Colors.white,
                          onPressed: () {
                            (forms.currentState as FormState).validate();
                          })
                    ]),
                  )),
              Switch(value: switchState, onChanged: onChanged),
              Text("$switchState"),
              Flex(direction: Axis.horizontal,mainAxisAlignment:MainAxisAlignment.spaceEvenly, children: <Widget>[
                Expanded(
                    flex: 1,
                    child: Container(
                        padding:EdgeInsets.all(20.0),
                        child: Image(

                            image: AssetImage('lib/image/img.png')))),
                Expanded(
                    flex: 1,
                    child: Container(
                        padding:EdgeInsets.all(20.0),
                        child: Image(

                            image: NetworkImage(
                                'https://avatars2.githubusercontent.com/u/20411648?s=460&v=4'))))
              ])

              //Header()
//          Container(
//            child:Text("test"),
//          )
            ]));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("1==========================");
    // print(FocusScope.of(context));
    new Timer(Duration(seconds: 10), () {
      (FocusScope.of(context)).requestFocus(pw);
      print('=================2');
    });
    new Timer(Duration(seconds: 20), () {
      pw.unfocus();
      print('===============2.5');
    });
    print("============3");
  }

  // TODO:
  void onChanged(bool value) {
    setState(() {
      switchState = value;
    });
  }
}

複製程式碼