Flutter開発の常用Widget学習
文書ディレクトリ 一、Textコンポーネント 二、Containerコンポーネント 三、Imageコンポーネント 四、ListViewコンポーネント 五、GridViewコンポーネント
一、Textコンポーネント
ツールバーの
textAlign: TextAlign.left,----テキスト整列方式maxLines:1,----最大行overflow:TextOverflowを表示する.clip,---テキストオーバーフローの処理方法 clip:オーバーフローした文字を直接切断します. ellipsis:後に省略記号(...)を表示する常用 fade:グラデーション消失効果 スタイル文字のスタイル
二、Containerコンポーネント
Alignnmentプロパティ、Container内childの位置合わせ、つまりコンテナのサブコンテンツの位置合わせは、コンテナ自体の位置合わせではありません.padding内マージンmargin外マージンdecoration装飾器使用:
三、Imageコンポーネント
画像の追加方法:
Image.assetプロジェクトリソース画像Image.ファイル(絶対パス)システムリソース画像Image.Network(url)ネットワークリソースピクチャfitプロパティ BoxFit.fill BoxFit.contain BoxFit.cover
repeatプロパティ ImageRepeat.repeatは横方向と縦方向を繰り返し、容器全体 を敷く. ImageRepeat.repeatX横反復 ImageRepeat.repeatY縦反復
四、ListViewコンポーネント
リストの使用
横方向リスト:ListViewコンポーネントにscrollDirectionプロパティを追加
Dart言語Listの宣言方式: var myList=List():固定長以外の宣言. var myList=List(2):固定長の宣言. var myList=List():固定型の宣言方式. var myList=[1,2,3]:Listに を直接付与
五、GridViewコンポーネント
共通のプロパティ: crossAxisSpacing:メッシュ間の空白. crossAxisCount:1行に配置されたメッシュの数.
政府はこの方法の使用を奨励していないが、もう一つの書き方は childAspectRatio:アスペクト比 mainAxisSpacing:横メッシュニュートラル crossAxisSpacing:縦メッシュへのバリア これで、コンポーネントを使った学習はここまでです.次はレイアウトに関する知識を学びます.
一、Textコンポーネント
ツールバーの
textAlign: TextAlign.left,----テキスト整列方式maxLines:1,----最大行overflow:TextOverflowを表示する.clip,---テキストオーバーフローの処理方法
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プロパティ
repeatプロパティ
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の宣言方式:
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コンポーネント
共通のプロパティ:
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),
],
),