Flutter 기초(둘)

5062 단어

목록의 클릭 이벤트

  • onTap 클릭 이벤트
  • onLongPress 종속 이벤트
  • 페이지 점프 전송 매개 변수

  • Navigator.pushNamed(context, RouterName)//item에서 이벤트를 클릭하여 현재 item 개체Navigator를 전달합니다.pushNamed(context, "DetailPage", arguments: item);

  • Widget

  • Text
  •     return Scaffold(
          appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text(widget.title),
            centerTitle: true,
            backgroundColor: Colors.red,
          ),
    //      bottomNavigationBar: BottomNavigationBar(items: null),
    //      bottomSheet: BottomSheet(onClosing: null, builder: null),
          body: Center(
            // Center is a layout widget. It takes a single child and positions it
            // in the middle of the parent.
            child: Column(
              // Column is also a layout widget. It takes a list of children and
              // arranges them vertically. By default, it sizes itself to fit its
              // children horizontally, and tries to be as tall as its parent.
              //
              // Invoke "debug painting" (press "p" in the console, choose the
              // "Toggle Debug Paint" action from the Flutter Inspector in Android
              // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
              // to see the wireframe for each widget.
              //
              // Column has various properties to control how it sizes itself and
              // how it positions its children. Here we use mainAxisAlignment to
              // center the children vertically; the main axis here is the vertical
              // axis because Columns are vertical (the cross axis would be
              // horizontal).
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RaisedButton(
                  child: Text("click to listPage"),
                  onPressed: () {
                    Navigator.pushNamed(context, "ListPage");
                  },
                ),
                RaisedButton(
                  child: Text("click to TestPage"),
                  onPressed: () {
                    Navigator.pushNamed(context, "TestTwo");
                  },
                ),
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
                Text('test'),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            //  
    //        onPressed: () {
    //          Navigator.push(context, MaterialPageRoute(builder: (context) {
    //            return ListPage();
    //          }));
    //        },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
    
  • Button Raised Button: 돌출된 버튼 Flat Button: 편평한 버튼 Outline Button: 테두리 버튼 IconButton: 아이콘 버튼
  • import 'package:flutter/material.dart';
    
    class ButtonPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("ButtonPage"),
          ),
          body: new Column(
            children: [
              RaisedButton(
                child: Text("raise button"),
                onPressed: () {},
              ),
              FlatButton(
                child: Text("flat button"),
                color: Colors.red,
              ),
              OutlineButton(
                child: Text("outline button"),
                textColor: Colors.blue,
              ),
              IconButton(
                icon: Icon(Icons.add),
              ),
            ],
          ),
        );
      }
    }
    
    
  • Container Container는 매우 자주 사용하는widget으로 그는 보통 용기로 사용한다.기본 속성
  • import 'package:flutter/material.dart';
    
    class ContainerPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Title(
              child: Text("container page"),
              color: Colors.red,
            ),
          ),
          body: Center(
              child: new Column(
            children: [
              Container(
                color: Colors.red,
                width: 200,
                margin: EdgeInsets.only(left: 150),
                padding: EdgeInsets.only(right: 150),
                height: 200,
                //  
                transform: Matrix4.rotationZ(0.5),
                child: Text(
                  "hello container",
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
              ),
              Image(
                image: NetworkImage(
                    "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white-d0c9fe2af5.png"),
              ),
            ],
          )),
        );
      }
    }
    

    좋은 웹페이지 즐겨찾기