Flutter各種ListView圖文清單佈局

Card 圖與文字列表(文長短不一)

import 'package:flutter/material.dart';
final String imagePath = "assets/images/";

void main() {
  runApp(new RobotList());
}
List<bool> isSelected = [true, false];

class RobotList extends StatefulWidget {
  @override
  _RobotListState createState() => new _RobotListState();
}
class _RobotListState extends State<RobotList> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar:AppBar(
        title: Text("機器人功能"),
      ),
      body:LinkList()
    );
  }
}
class LinkList extends StatelessWidget {
  LinkList({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
          shrinkWrap: true,
          padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
          children: <Widget>[
            ProductBox(
                name: "機器人情",
                description: "機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報",
                image: "indexbluead.png"
            ),
            ProductBox(
                name: "機器人情報報機器人情報機器人情報機器人",
                description: "機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報",
                image: "newsphoto2.png"
            ),
            ProductBox(
                name: "機器人情報",
                description: "機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報機器人情報",
                image: "newsphoto3.png"
            ),
          ],
        )
    );
  }
}
class ProductBox extends StatelessWidget {
  ProductBox({Key key, this.name, this.description, this.image}) :
        super(key: key);
  final String name;
  final String description;
  final String image;

  Widget build(BuildContext context) {
    return Expanded(
        child:
    Column(
      children: [
        Container(
          padding: EdgeInsets.fromLTRB(10, 0, 10, 20),
          child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              clipBehavior: Clip.antiAliasWithSaveLayer,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.vertical(top: Radius.circular(10)),
                      child: Container(
                        // width: 140,
                        height: 130.0,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: ExactAssetImage(imagePath + image),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                    Container(
                        color: mainColor[350],
                        padding: EdgeInsets.fromLTRB(15, 10, 15, 10),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              this.name, style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            Container(height: 5,),
                            Text(this.description, style: TextStyle(fontSize: 14, color: Color(0xFFbdbdbd)),),
                          ],
                        )
                    )
                  ]
              )
          ),
        )
      ],
    )
    );
  }
}

關於站主

Shiro

因為興趣無限擴張,一直很猶豫要不要寫一個很雜的Blog,後來還是這麼做了。

聯絡:shiro050102✦gmail.com  ✦請自行更換成@