Flutter 개발(5) - ListView 컨트롤 가로 방향 전시

Flutter 개발(4) - ListView 컨트롤러는 ListView의 간단한 사용법을 소개했고 여기에 동적 그림을 한 장 곁들여서 ListView의 가로 효과를 보았다.휴대전화의 달리기 효과는 매우 매끄럽다.아래의 코드 구조는 매우 간단하지만 flutter의View 작성도 코드를 나눌 수 있음을 증명하기 위해 간단하게 봉인했다. 1. 전체View 코드를 ViewShow에 넣는다.2. ListView 코드를 horizontalList에 언급했다.3. Listview의 각 항목을 ListItem에 언급합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ViewShow(),
    );
  }
}

//     
class ViewShow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
          title: new Text("ListView"),
          backgroundColor: Colors.black45), // Bar        
      body: Center(
        child: Container(
          height: 500, //Container         ListView  
          child: horizontalList(), //  ListView
        ),
      ),
    );
  }
}

//   ListView
class horizontalList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal, //     ，     
      children: <Widget>[
        new ListItem(context,
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1381175915,2452671132&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1486063646,2273285260&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=174198655,918435950&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2970139869,654827709&fm=200&gp=0.jpg"),
        new ListItem(context,
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=768870055,119193172&fm=200&gp=0.jpg"),
      ],
    );
  }
}

//ListView    item
class ListItem extends StatelessWidget {
  String image_url;
  ListItem(BuildContext mContext, String url) {
    image_url = url;
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size; //        
    print("--------------$size"); //      360.0  720.0
    final width = size.width;
    final height = size.height;
    // TODO: implement build
    return new Container(
      width: width, //      
      child: Container(
          margin: EdgeInsets.all(10),
          decoration: new BoxDecoration(
              border: Border.all(color: Colors.yellow, width: 3.0), //  
              borderRadius: new BorderRadius.all(new Radius.circular(20.0)),  //   
              image: DecorationImage(
                  image: NetworkImage(image_url), fit: BoxFit.cover))), //    、      
    );
  }
}