Flutter

[Flutter] ListView 위젯

Stater 2023. 12. 15. 00:18

ListView 목록형위젯으로 사용

 

- 내 맥북설정 키 도움말 => fn+^+스페이스바

 

ListView 위젯연습용

 

import 'package:flutter/material.dart'; class MainScreen extends StatefulWidget { const MainScreen({super.key}); @override State createState() => _MainScreenState(); } class _MainScreenState extends State { List letSubtitle = ["1","2","3","4",]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('메인화면'), ), // body: Center( // //child: Text('메인화면입니다.'), // child: Column( // mainAxisAlignment: MainAxisAlignment.center, //중앙배치 // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // Text('반갑습니다.'), // Text('반갑습니다2'), // Text('반갑습니다3'), // ],), // ), // body: Column( // mainAxisAlignment: MainAxisAlignment.center, //중앙배치 // crossAxisAlignment: CrossAxisAlignment.start, // children: [ // Text('반갑습니다.'), // Text('반갑습니다2'), // Text('반갑습니다3'), // Row( // mainAxisAlignment: MainAxisAlignment.center, // children: [ // Text('반갑습니다1'), // Text('반갑습니다2'), // Text('반갑습니다3'), // ], // ), // Row( // children: [ // //일정한 가격을 두고 비율로 정렬된다. // Expanded(flex: 2, child: Text('홍1')), // Expanded(child: Text('홍2')), // Expanded(child: Text('홍3')), // ], // ), // Container( // width: 300, // height: 100, // margin: EdgeInsets.all(32), // //margin: EdgeInsets.only(left: 10,right: 10,top: 10,bottom: 10), // //한쪽만 정렬하고싶은경우에만 사용 // alignment: Alignment.center, // //컨테이너 기준으로 정렬 // child: Text('Container'), // //color: Colors.blueAccent, // decoration: BoxDecoration( // borderRadius: BorderRadius.circular(10), // color: Colors.blueAccent, // ), // ), // // SizedBox( // // height: 300, // // width: 600, // // child: Text( // // '확인용사용합니다', // // style: TextStyle( // // color: Colors.red, // // fontWeight: FontWeight.bold, // // fontSize: 30, // // ), // // ), // // ), // Text( // '확인용사용합니다', // style: TextStyle( // color: Colors.red, // fontWeight: FontWeight.bold, // fontSize: 30, // ), // ), // Row( // children: [ // Image.asset( // 'assets/car.png', // width: 100, // height: 100, // ), // Icon(Icons.home_filled,size: 100,color:Colors.red), // ], // ) // ], // ), //버튼관련 // body: Column( // children: [ // Container( // margin: EdgeInsets.all(32), // width: 200, // height: 70, // child: ElevatedButton( // onPressed: () { // // 클릭 했을때 동작하고 싶은 내용을 만든다. // print('버튼이 클릭되었습니다.'); // }, // style: ElevatedButton.styleFrom( // primary: Colors.green, // onPrimary: Colors.yellow, // elevation: 10//높이 z축에 약간의 그림자 형태를 가능하게한다. // ), // child: Text('눌러보세요')), // ) // ], // ), //리스트뷰관련 body: ListView.builder( itemBuilder: (context, index) { return ListTile( //title: Text('안녕하세요 ${index}'), title: Text('안녕하세요 ${index}') ,subtitle: Text('${letSubtitle[index]}'), ); }, //itemCount: 10, itemCount: letSubtitle.length, ), ); } }

 

 

반응형