2022-04-20 TIL Flutter-#3

9653 ワード
TIL テキストリンク
今日の目標

  • こんな画面を作ろう
    -今日使う友達
  • appBar()
  • app商団棒を作る役割を果たしました
  • Row() Column()
  • 行は、要素を水平Columnに垂直に揃えます.
  • Container()

    • 1.頭（上欄）

     appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text('역삼동', style: TextStyle(color: Colors.black), textAlign: TextAlign.left, ),
          actions: [Icon(Icons.search, color: Colors.black,)],
        ),
  • の背景色を白に指定します.
    -既存の色はスカイブルーです.
  • textAlign
    -テキストの配置方法を指定します.
  • actions[]
    -かっこを使用します.四角カッコに多くのアイコン要素を追加できます.

    • 2.胴

    body: Row(
              children: [
                Image.asset('assets/camera1.jpeg', width: 100),
                Container( height: 100,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('고오급 캐논 디지털 카메라', style: TextStyle(fontWeight: FontWeight.bold),),
                    Text('역삼동 그어딘가', style: TextStyle(color: Colors.grey),),
                    Text('100원', style: TextStyle(fontWeight: FontWeight.bold),),
                  ],
                ),),
              ],
            )

  • どうしてそう書いたのですか.
  • のレイアウトを描きましょう.
  • 写真部分と説明部分に分けることができ、横方向と縦方向がはっきりしています.
    • したがって、
  • は、合成方向全体が横方向であるが、テキスト部分は縦方向である.
  • 商品説明
    • を垂直軸方向左に並べる.
  • Row()とColumn()を使用する場合は、どの要素を加えるかよく考えてください.
    • Row Columnソート学習資料

  • かなり漏れていますが、レイアウトは似ています.

    • ついでにバーを作ってみたらどうですか。

  • 下端用bottomNavigationBar
    •  bottomNavigationBar: BottomAppBar(
            child: Row(
              children: [
                Icon(Icons.home),
                Icon(Icons.bus_alert),
                Icon(Icons.linked_camera),
              ],
           ),
      ),

  • に質問
  • の下の欄に並べられたアイコンは水平に揃える必要があります.
    • だから
  • 列は面白くない

  • そうしましょう.
  • Row()ソートの要素を受け入れるので、Children()のIcon奴らには新しいソートが必要かもしれません.
  • mainAxisAlignment: MainAxisAlignment.spaceEvenly 
    • bottomNavigationBar: BottomAppBar(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.home),
                Icon(Icons.bus_alert),
                Icon(Icons.linked_camera),
              ],
            ),
      	),
  • は統一された幅を保ち、きれいに並んでいます.
    • 【数学】【ふるい数】Miller-Rabin素性テスト学習ノート
    PivotalGreenplum®6.8-インストールガイド-システムの検証