- Оригинальный адрес:Flutter Challenge: Twitter
- Оригинальный автор:Deven Joshi
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:MeFelixWang
Challenge Flutter попытается воссоздать пользовательский интерфейс или дизайн определенного приложения во Flutter.
В этом задании будет предпринята попытка реализовать домашнюю страницу Twitter для Android. Обратите внимание, что основное внимание будет уделяться пользовательскому интерфейсу, а не получению данных с внутреннего сервера.
Понимание структуры приложения
Twitter имеет четыре основные страницы, управляемые нижней панелью навигации.
Они есть:
- Домашняя страница (показывает подписанные твиты)
- Страница поиска (поиск людей, организаций и т.д.)
- Страница уведомлений (уведомления и упоминания)
- Страница сообщения (личное сообщение)
BottomNavigationBar имеет четыре вкладки для перехода на каждую страницу.
В нашем приложении будет четыре разных страницы, просто нажмите на элемент на нижней панели навигации, чтобы переключить страницы.
создать проект
После создания проекта Flutter (я назвал его twitter_ui_demo), очистите код по умолчанию в проекте, оставив только это:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
//这是应用的根组件
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
),
);
}
}
На домашней странице есть эшафот, который содержит нашу панель BottomNavigationBar и текущую активную страницу.
Начинать
Поскольку нижняя панель навигации является основным компонентом, используемым для навигации, давайте сначала попробуем реализовать ее.
Вот как выглядит BottomNavigationBar:
Поскольку в приложении не требуется значок, мы будем использоватьFont Flutter Awesome package. Добавьте зависимости и импортируйте в pubspec.yaml
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
в файл.
Код для BottomNavigationBar выглядит следующим образом:
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.home, color: selectedPageIndex == 0? Colors.blue : Colors.blueGrey,),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.search, color: selectedPageIndex == 1? Colors.blue : Colors.blueGrey,),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.bell, color: selectedPageIndex == 2? Colors.blue : Colors.blueGrey,)
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.envelope, color: selectedPageIndex == 3? Colors.blue : Colors.blueGrey,),
),
], onTap: (index) {
setState(() {
selectedPageIndex = index;
});
}, currentIndex: selectedPageIndex)
Добавьте его на домашнюю страницу.
Обратите внимание, что при установке цвета значка мы проверяем, выбран ли значок, а затем указываем цвет. В Twitter выбранный значок синий, давайте установим для невыбранного значка синий серый.
Определите целочисленную переменную с именем selectedPageIndex для хранения индекса выбранной страницы. В функции onTap мы устанавливаем переменную в новый индекс. Завершите это с помощью setState(), потому что нам нужно обновить страницу, чтобы повторно отобразить AppBar.
Реализована нижняя панель навигации:
Создайте страницу
Давайте создадим четыре основные страницы, которые будут отображаться при нажатии на соответствующую иконку.
Созданные четыре страницы (в отдельных файлах) выглядят следующим образом:
Код страницы подписки пользователя (домашняя страница) выглядит следующим образом:
import 'package:flutter/material.dart';
class UserFeedPage extends StatefulWidget {
@override
_UserFeedPageState createState() => _UserFeedPageState();
}
class _UserFeedPageState extends State<UserFeedPage> {
@override
Widget build(BuildContext context) {
return Container();
}
}
Аналогично настраиваем страницы поиска, уведомлений и сообщений.
Возвращаясь к основным страницам, импортируйте эти страницы и определите их как список.
var pages = [
UserFeedPage(),
SearchPage(),
NotificationPage(),
MessagesPage(),
];
В Scaffold напишите
body: pages[selectedPageIndex],
Он установит тело для отображения этих страниц.
Пока что код базового компонента MyHomePage выглядит следующим образом:
class _MyHomePageState extends State<MyHomePage> {
var selectedPageIndex = 0;
var pages = [
UserFeedPage(),
SearchPage(),
NotificationPage(),
MessagesPage(),
];
@override
Widget build(BuildContext context) {
return new Scaffold(
body: pages[selectedPageIndex],
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.home, color: selectedPageIndex == 0? Colors.blue : Colors.blueGrey,),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.search, color: selectedPageIndex == 1? Colors.blue : Colors.blueGrey,),
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.bell, color: selectedPageIndex == 2? Colors.blue : Colors.blueGrey,)
),
BottomNavigationBarItem(
title: Text(""),
icon: Icon(FontAwesomeIcons.envelope, color: selectedPageIndex == 3? Colors.blue : Colors.blueGrey,),
),
], onTap: (index) {
setState(() {
selectedPageIndex = index;
});
}, currentIndex: selectedPageIndex,),
);
}
}
Теперь мы воссоздадим страницу.
Создайте страницу подписки пользователей
На странице есть два элемента: AppBar и список твитов.
Сначала создайте AppBar. Он имеет изображение профиля пользователя и заголовок черным по белому.
appBar: AppBar(
backgroundColor: Colors.white,
title: Text("Home", style: TextStyle(color: Colors.black),),
leading: Icon(Icons.account_circle, color: Colors.grey, size: 35.0,),
),
Мы будем использовать значок вместо изображения профиля.
Воссозданный AppBar
Теперь нам нужно создать список твитов. Для этого мы используем ListView.builder().
Давайте посмотрим на элементы списка.
Во-первых, нам нужен столбец, состоящий из строки и разделителя.
В строке есть значок и еще один столбец.
В этой колонке есть строка для отображения информации о твите, текст для отображения самого твита, изображение и еще одна строка для применения операций (таких как комментарии и т. д.) к твиту.
Для краткости давайте пока опустим изображение, на самом деле это так же просто, как добавить изображение в строку.
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.account_circle, size: 60.0, color: Colors.grey,),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(child: RichText(
text: TextSpan(
children: [
TextSpan(text:tweet.username, style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18.0, color: Colors.black),),
TextSpan(text:" " + tweet.twitterHandle,style: TextStyle(fontSize: 16.0, color: Colors.grey)),
TextSpan(text:" ${tweet.time}",style: TextStyle(fontSize: 16.0, color: Colors.grey))
]
),overflow: TextOverflow.ellipsis,
)),flex: 5,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 4.0),
child: Icon(Icons.expand_more, color: Colors.grey,),
),flex: 1,
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(tweet.tweet, style: TextStyle(fontSize: 18.0),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(FontAwesomeIcons.comment, color: Colors.grey,),
Icon(FontAwesomeIcons.retweet, color: Colors.grey,),
Icon(FontAwesomeIcons.heart, color: Colors.grey,),
Icon(FontAwesomeIcons.shareAlt, color: Colors.grey,),
],
),
)
],
),
)
],
),
),
Divider(),
],
);
После создания вспомогательного класса для обслуживания простого твита и простого FloatingActionButton страница выглядит так:
Воссозданное приложение Twitter
Это перестроенная страница подписки пользователя Twitter. Любой пользовательский интерфейс можно быстро и легко воссоздать во Flutter, что говорит о его скорости разработки и настраиваемости. Трудно сбалансировать два.
Полный пример размещен на Github.
Ссылка на гитхаб:GitHub.com/playeven98/TW я…
Спасибо, что прочитали этот вызов Flutter. Не стесняйтесь сообщать мне о любых приложениях, которые вы хотели бы воссоздать во Flutter. Пожалуйста, дайте звезду, если вам это нравится, увидимся в следующий раз.
не пропустите:
Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.