页面布局

fujianlian · Jan 3, 2019 · cd12ae5 · cd12ae5
1 parent 9bbe8cd
commit cd12ae5
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 114 deletions.
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -14,7 +14,7 @@
          FlutterApplication and put your custom class here. -->
     <application
         android:name="io.flutter.app.FlutterApplication"
-        android:label="flutter_gank"
+        android:label="干货集中营"
         android:icon="@mipmap/ic_launcher">
         <activity
             android:name=".MainActivity"

diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
@@ -11,7 +11,7 @@
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
-	<string>flutter_gank</string>
+	<string>干货集中营</string>
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>

diff --git a/lib/gank/HomePage.dart b/lib/gank/HomePage.dart
@@ -13,117 +13,114 @@ class HomePage extends StatefulWidget {
 }
 
 class HomeState extends State<HomePage> {
-  List<Results> data;
-
-  @override
-  void initState() {
-    super.initState();
-    _pullNet();
-  }
-
-  void _pullNet() async {
-    await http
-        .get("http://gank.io/api/data/Android/15/1")
-        .then((http.Response response) {
-      var convertDataToJson = GankInfo.fromJson(json.decode(response.body));
-      setState(() {
-        data = convertDataToJson.results;
-      });
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('最新'),
-        centerTitle: true,
+    Widget titleSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Container(
+                  padding: const EdgeInsets.only(bottom: 8.0),
+                  child: Text(
+                    'Oeschinen Lake Campground',
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                Text(
+                  'Kandersteg, Switzerland',
+                  style: TextStyle(
+                    color: Colors.grey[500],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Icon(
+            Icons.star,
+            color: Colors.red[500],
+          ),
+          Text('41'),
+        ],
       ),
+    );
+
+    Column buildButtonColumn(IconData icon, String label) {
+      Color color = Theme.of(context).primaryColor;
 
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Icon(icon, color: color),
+          Container(
+            margin: const EdgeInsets.only(top: 8.0),
+            child: Text(
+              label,
+              style: TextStyle(
+                fontSize: 12.0,
+                fontWeight: FontWeight.w400,
+                color: color,
+              ),
+            ),
+          ),
+        ],
+      );
+    }
 
-      body: new ListView(children: data != null ? _getItem() : _loading()),
+    Widget buttonSection = Container(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          buildButtonColumn(Icons.call, 'CALL'),
+          buildButtonColumn(Icons.near_me, 'ROUTE'),
+          buildButtonColumn(Icons.share, 'SHARE'),
+        ],
+      ),
     );
-  }
 
-  List<Widget> _loading() {
-    return <Widget>[
-      new Container(
-        height: 300.0,
-        child: new Center(
-            child: new Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            new CircularProgressIndicator(
-              strokeWidth: 1.0,
-            ),
-            new Text("正在加载"),
-          ],
-        )),
-      )
-    ];
-  }
+    Widget textSection = Container(
+      padding: const EdgeInsets.all(32.0),
+      child: Text(
+        '''
+Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
+        ''',
+        softWrap: true,
+      ),
+    );
 
-  List<Widget> _getItem() {
-    return data.map((item) {
-      return new GestureDetector(
-          onTap: () {
-            //导航到新路由
-            Navigator.push(context, new MaterialPageRoute(builder: (context) {
-              return new WebPage(url: item.url,title: item.desc);
-            }));
-          },
-          child: new Card(
-            child: new Padding(
-              padding: const EdgeInsets.all(10.0),
-              child: _getRowWidget(item),
-            ),
-            elevation: 3.0,
-            margin: const EdgeInsets.only(
-                left: 10.0, top: 6.0, right: 10.0, bottom: 6.0),
-          ));
-    }).toList();
-  }
+    return MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(
+          centerTitle: true,
+          title: Text('最新'),
+          actions: <Widget>[
+            IconButton(
+              icon: const Icon(Icons.event),
+              onPressed: () {
 
-  Widget _getRowWidget(item) {
-    return new Row(
-      children: <Widget>[
-        new Flexible(
-            flex: 1,
-            fit: FlexFit.tight, //和android的weight=1效果一样
-            child: new Stack(
-              children: <Widget>[
-                new Column(
-                  children: <Widget>[
-                    new Text("${item.desc}",
-                        maxLines: 3,
-                        style: new TextStyle(
-                          color: Colors.black,
-                          fontSize: 18.0,
-                        ),
-                        textAlign: TextAlign.start),
-                    new Row(children: <Widget>[
-                      new Text(
-                        "${item.who}",
-                        textAlign: TextAlign.left,
-                        style: new TextStyle(
-                          color: Color(0xFF888888),
-                          fontSize: 14.0,
-                        ),
-                      ),
-                      new Text(
-                        "${item.createdAt}".substring(0, 10),
-                        style: new TextStyle(
-                          color: Color(0xFF888888),
-                          fontSize: 14.0,
-                        ),
-                        textAlign: TextAlign.right,
-                      )
-                    ])
-                  ],
-                )
-              ],
-            )),
-      ],
+              },
+            )
+          ],
+        ),
+        body: ListView(
+          children: [
+            Image.asset(
+              'images/holder.png',
+              height: 180.0,
+              fit: BoxFit.cover,
+            ),
+            titleSection,
+            buttonSection,
+            textSection,
+          ],
+        ),
+      ),
     );
   }
 }
diff --git a/lib/gank/MainPage.dart b/lib/gank/MainPage.dart
@@ -51,7 +51,7 @@ class MainPageState extends State<MainPageWidget> {
      */
     tabImages = [
       Icon(Icons.home),
-      Icon(Icons.tune),
+      Icon(Icons.widgets),
       Icon(Icons.spa),
       Icon(Icons.person),
     ];

diff --git a/lib/gank/MyPage.dart b/lib/gank/MyPage.dart
@@ -1,16 +1,27 @@
 import 'package:flutter/material.dart';
 
-class MyPage extends StatelessWidget {
+class MyPage extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return new _MyPageState();
+  }
+}
+
+class _MyPageState extends State<MyPage> {
   @override
   Widget build(BuildContext context) {
-    return new MaterialApp(
-      title: 'Flutter Demo',
-      theme: new ThemeData(
-        primarySwatch: Colors.blue,
-      ),
-      debugShowCheckedModeBanner: false,
-      home: new Scaffold(
-        body: new Center(child:new Text("我的")),
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('我的'),
+        centerTitle: true,
+        actions: <Widget>[
+          IconButton(
+            icon: const Icon(Icons.transform),
+            onPressed: () {
+              setState(() {});
+            },
+          )
+        ],
       ),
     );
   }