Flutter開発の常用Widget学習


文書ディレクトリ
  • 一、Textコンポーネント
  • 二、Containerコンポーネント
  • 三、Imageコンポーネント
  • 四、ListViewコンポーネント
  • 五、GridViewコンポーネント

  • 一、Textコンポーネント
    ツールバーの
    textAlign: TextAlign.left,----テキスト整列方式maxLines:1,----最大行overflow:TextOverflowを表示する.clip,---テキストオーバーフローの処理方法
  • clip:オーバーフローした文字を直接切断します.
  • ellipsis:後に省略記号(...)を表示する常用
  • fade:グラデーション消失効果
  • スタイル文字のスタイル
     body: new Center(
              child: new Text('       ,       。(   )',
                  textAlign: TextAlign.left,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontSize: 20,
                    color: Color.fromARGB(255, 0, 0, 255),
                    decoration: TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.solid,
                    fontStyle: FontStyle.italic,
                  )),
            ),
    

    二、Containerコンポーネント
    Alignnmentプロパティ、Container内childの位置合わせ、つまりコンテナのサブコンテンツの位置合わせは、コンテナ自体の位置合わせではありません.padding内マージンmargin外マージンdecoration装飾器使用:
    body: new Center(
              child: new Container(
                child: new Text(
                  '       ,       。(   )',
                  style: TextStyle(fontSize: 30.0),
                ),
                alignment: Alignment.topLeft,
                width: 500.0,
                height: 200.0,
                //color: Colors.lightBlue,
                //padding: const EdgeInsets.all(10),    //   
                padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0, 0),
                margin: const EdgeInsets.all(20.0),
                decoration: new BoxDecoration(
                  gradient: const LinearGradient(
                      colors: [Colors.lightBlue, Colors.green, Colors.purple]
                      ),
                      border: Border.all(width: 5.0,color:Colors.red
                      ),
                ),
              ),
            ),
    

    三、Imageコンポーネント
    画像の追加方法:
    Image.assetプロジェクトリソース画像Image.ファイル(絶対パス)システムリソース画像Image.Network(url)ネットワークリソースピクチャfitプロパティ
  • BoxFit.fill
  • BoxFit.contain
  • BoxFit.cover

  • repeatプロパティ
  • ImageRepeat.repeatは横方向と縦方向を繰り返し、容器全体
  • を敷く.
  • ImageRepeat.repeatX横反復
  • ImageRepeat.repeatY縦反復
  • body: new Center(
                child: new Container(
              child: new Image.network(
                'https://profile.csdnimg.cn/0/5/2/1_jyd0124',
                fit: BoxFit.cover,
                //color: Colors.lightBlue,
                //colorBlendMode: BlendMode.darken, //      (colorBlendMode) color      
              ),
              width: 300.0,
              height: 200.0,
              color: Colors.lightGreen,
            )
        ),
    

    四、ListViewコンポーネント
    リストの使用
    body: new ListView(
              children: <Widget>[
                /*new Image.network(
                    'https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png'),
                new Image.network(
                    'https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png'),
                 */ //      
                new ListTile(
                  leading: new Icon(
                    Icons.perm_camera_mic,
                  ),
                  title: new Text('perm_camera_mic'),
                ),
                new ListTile(
                  leading: new Icon(
                    Icons.perm_phone_msg,
                  ),
                  title: new Text('perm_phone_msg'),
                ),
              ],
            ),
    

    横方向リスト:ListViewコンポーネントにscrollDirectionプロパティを追加
    body: new Center(
                child: new Container(
                    height: 200.0,
                    child: new ListView(
                      scrollDirection: Axis.horizontal, //Axis.vertical:    
                      children: <Widget>[
                        new Container(
                          width: 230.0,
                          color: Colors.lightBlue,
                        ),
                        new Container(
                          width: 230.0,
                          color: Colors.lightGreen,
                        ),
                      ],
                    ))),
    

    Dart言語Listの宣言方式:
  • var myList=List():固定長以外の宣言.
  • var myList=List(2):固定長の宣言.
  • var myList=List():固定型の宣言方式.
  • var myList=[1,2,3]:Listに
  • を直接付与
    import 'package:flutter/material.dart';
    
    void main() =>
        runApp(MyApp(items: List<String>.generate(1000, (i) => 'item $i')));
    
    class MyApp extends StatelessWidget {
         
      final List<String> items;
      MyApp({
         Key key, @required this.items}) : super(key: key);
      @override
      Widget build(BuildContext context) {
         
        return MaterialApp(
          title: 'ListView Dome',
          home: new Scaffold(
            appBar: new AppBar(title: new Text('ListView Widget')),
            body: new ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
         
                  return new ListTile(
                    title: new Text('${items[index]}'),
                  );
                }),
          ),
        );
      }
    }
    

    五、GridViewコンポーネント
    共通のプロパティ:
  • crossAxisSpacing:メッシュ間の空白.
  • crossAxisCount:1行に配置されたメッシュの数.
  • body: GridView.count(
                padding: EdgeInsets.all(20.0),
                crossAxisSpacing: 10.0,
                crossAxisCount: 3,
                children: <Widget>[
                  const Text('I am j.y.d'),
                  const Text('I love flutter'),
                  const Text('jyd0124.com'),
                  const Text('2020/02/06'),
                  const Text('Come on,China!'),
                  const Text('Come on,Wuhan!'),
                ],
              ),
    

    政府はこの方法の使用を奨励していないが、もう一つの書き方は
    body: GridView(
               gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                 crossAxisCount: 3,
                 mainAxisSpacing: 2.0,
                 crossAxisSpacing: 2.0,
                 childAspectRatio: 0.75,
                 ),
                children: <Widget>[
                  new Image.network('http://img5.mtime.cn/mg/2019/10/02/105324.67493314_170X256X4.jpg',fit:BoxFit.cover),
                  new Image.network('http://img5.mtime.cn/mg/2019/09/26/092514.83698073_170X256X4.jpg',fit:BoxFit.cover),
                  new Image.network('http://img5.mtime.cn/mg/2019/11/07/111316.10093613_170X256X4.jpg',fit:BoxFit.cover),
                  new Image.network('http://img5.mtime.cn/mg/2019/12/13/094432.64997517_170X256X4.jpg',fit:BoxFit.cover),
                  new Image.network('http://img31.mtime.cn/mt/2014/02/22/230757.74994253_220X124X4.jpg',fit:BoxFit.cover),
                  new Image.network('http://img5.mtime.cn/mg/2019/07/10/164947.40820910_170X256X4.jpg',fit:BoxFit.cover),
                ],
            ),
    
  • childAspectRatio:アスペクト比
  • mainAxisSpacing:横メッシュニュートラル
  • crossAxisSpacing:縦メッシュへのバリア
  • これで、コンポーネントを使った学習はここまでです.次はレイアウトに関する知識を学びます.