Предварительный просмотр
Эй, вы получаете волосы, я Ян Сяоян, этот эпизод тогда говорит о трепетании Google «Родитель». Со времени обмена последней статьей некоторые Dudu также опубликовали некоторые интересные комментарии. Давайте сначала посмотрим на это.
1.1 Читать отзывы
- Не могли бы вы выложить милых питомцев? Немного неловко смотреть на них в офисе.@кто-то использовал мое имя
- Что за чертовщина? значок такой большой@Paixs
- Этот интерфейс действительноупорная ложка
Очень интересно выбрать здесь 3 комментария.Мы ведь не дизайнеры.Это должно доказывать насколько важен UI продукта.Конечно,он также рандомно размещается в области комментариев,и их ссылки тоже могут быть Посмотрите, будут ли у другой стороны какие-либо технические колонки, и мы сможем учиться друг у друга. Для каждого участка дороги после этого я также буду публиковать ваши замечательные комментарии из области комментариев.
1.2 Об интеграции
-
Модуль Flutter сообщества Nuggets в течение 7 днейГорячий № 1
-
Модуль Flutter сообщества NuggetsТоп 3
-
Модуль Flutter сообщества Nuggetsпоследний 8-й
-
до настоящего времени25 лайков 10 комментариев
Хотя мне не очень нравится алгоритм поиска наггетсов, я слышал, что он был обновлен, и я надеюсь, что он будет становиться все лучше и лучше.Вы можете поделиться своим исследованием технологии.
2. Пишите впереди
Неосознанно прошла еще одна неделя, а в самом процессе разработки все еще будет много подводных камней, и мы поделимся с вами этим пошаговым процессом, включая такие процессы, как взаимодействие с провайдером и в фоновом режиме. корпоративная конфигурация Dio и т. д. Потом в этом эпизоде еще рисуем интерфейс
- Портал последнего путешествияФактический бой Flutter создает «островное» APP с нуля (№ 1, инициализация проекта, адаптация экрана)
- Количество слов в статье: 2901
- Время чтения: зависит от вас
- Прочитайте предупреждение: несколько ссылок, несколько изображений
2.1 Цели этой главы
Как показано на картинке, это все еще низкий интерфейс, следующий контент может быть немного скучным, но это действительно печень, с нетерпением жду встречи с вами.
2.2 Поделиться списком
- Большой список учебных ресурсов FlutterЧастичный обмен китайскими ресурсами, включая некоторые плагины
- Take the Flutter Clock challengeОфициальный "Clock Challenge"
2.3 Данные флаттера
-
указатель некоторых данных
3. Начать развитие
3.1 vscode-плагин
- FlutterОбнаружение синтаксиса, завершение кода, рефакторинг кода, отладка во время выполнения и горячая перезагрузка
- Dart
- Flutter Widget SnippetsФрагмент кода виджета
- Awesome Flutter SnippetsПредоставляет фрагменты кода для часто используемых функций.
Это потому, что приложение появляется непосредственно на странице входа или регистрации. Это немного тупо, и это крайне недружественно к пользователям.Все нужно делать медленно.Разве нет процесса? На самом деле, в процессе заставки экрана будут вынесены некоторые суждения, например, вошел ли пользователь в систему и т. д.
3.2 Вытягивающий код
обнаружил, что мы не отправили обновление
- Создайте новую ветку разработки
Затем мы создаем новую ветку разработки для записи новой главы.Что нам нужно сделать в этой главе, так это заставку и страницу руководства, как в заголовке
- ОТЛАДКА отладки
В последнюю неделю мы находимся в корневом каталоге проекта поflutter runзапустить проект, затемRа такжеrсделать переключатель
На этой неделе мы используемVscodeрежим отладки отладки
3.3 Обработка общедоступных переменных Global
В области комментариев некоторые друзья упомянули, что навигация внизу слишком велика На самом деле мы уже адаптировали экран, не так ли? через плагинflutter_screenutilКонечно, можно использовать и другие методы, напримерMediaQueryможет получитьwidgetи ширина и высота устройства
Итак, что такое глобальные переменные, глобальные переменные - это просто относится к переменной, будет проходить через весь жизненный цикл приложения, для простого сохранить некоторую информацию или некоторые объекты в глобальных упаковочных инструментах и методах.
Мы намерены создать новыйglobal.dartИспользуется для хранения, например, часто используемых значений ширины, высоты и размера шрифта.
cd utils
copy nul > global.dart // 新建一个global.dart（windows下）
import 'package:flutter_screenutil/flutter_screenutil.dart';
/// 页面常见的宽度与高度
// 宽度
double width100 = ScreenUtil.getInstance().setWidth(100);
// 高度
double height100 = ScreenUtil.getInstance().setHeight(100);
Затем мы используем наши переменные прямо в панели навигации внизу.Конечно, первый шаг — ввести
import '../utils/global.dart';
Протестируем, удалим все картинки, которые мы ввели в конце предыдущего абзаца, и напишем тестовый текст
Когда мы перезагружаемся, все в порядке
3.4 заставка
Наш первый шаг состоял в том, чтобы создать новую страницу страницы и названаsplash_screen_page
/// 闪屏的页面
import 'package:flutter/material.dart';
class SplashScreenPage extends StatelessWidget {
const SplashScreenPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Text('闪屏页面'),
),
);
}
}
затем вmain.dartСсылка и использование, в настоящее время мы больше не вводим интерфейс навигации внизу
return MaterialApp(
debugShowCheckedModeBanner: false, // 去除调试
title: '孤岛',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreenPage()); // 这里使用引导页，也就是说当用户一进来的时候，是一个闪屏
}
Затем давайте напишем страницу заставки, которая принадлежит этому островному ПРИЛОЖЕНИЮ, сначала разберем следующие несколько компонентов.
- SingleChildScrollView в основном контролирует переполнение компонентов внутри и может прокручиваться
- BoxDecoration в основном изменяет контейнер, например, цвет фона, ширину и т. д.
Здесь мы используем градиентgradient
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
// 线性渐变 有个渐变的过程
Color.fromRGBO(0, 0, 0, 0.2),
Color.fromRGBO(0, 0, 0, 0.4)
],
begin: FractionalOffset.topCenter, // 顶部居中
end: FractionalOffset.bottomCenter)), //
Эффект такой
В это время первой страницей приложения является страница заставки, а затем мы пишем основное содержимое этой страницы
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 30),
),
//
Text('孤岛',
style: TextStyle(
fontSize: fontSize200, fontWeight: FontWeight.w600))
],
),
),
Обратите внимание,fontSize: fontSize200Мы можем напрямую использовать размер, определенный публичной глобальной декларацией.
Ладно, побежали
К сожалению, сообщается об ошибке
The method '/' was called on null.
Эта проблема очень проста, на самом деле, когда мы используем экранизацию, мы не инициализировали
Явно хорошо, давайте просто вставим картинку, здесь будет лучше
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(assetName)
)
),
Какую картинку поставить, поставим консервативную, чувствую, что она все меньше и меньше похожа на "Остров App"
** Ресурсы изображений предоставлены мастером UP станции B ** wlop- (Если есть какие-либо нарушения, свяжитесь сBlog)
Старые правила, нам все еще нужно быть вpubspec.yamlНастройте его в , пока оставим так
Я помню, мы видели это вместе в нашей последней поездкеMaterialAppисходный код
const MaterialApp({
Key key,
this.navigatorKey,
this.home,
this.routes = const <String, WidgetBuilder>{}, // 我们暂时会用到这个路由的配置
this.initialRoute,
this.onGenerateRoute,
this.onUnknownRoute,
this.navigatorObservers = const <NavigatorObserver>[],
this.builder,
this.title = '',
this.onGenerateTitle,
this.color,
this.theme,
this.darkTheme,
this.themeMode = ThemeMode.system,
this.locale,
this.localizationsDelegates,
this.localeListResolutionCallback,
this.localeResolutionCallback,
this.supportedLocales = const <Locale>[Locale('en', 'US')],
this.debugShowMaterialGrid = false,
this.showPerformanceOverlay = false,
this.checkerboardRasterCacheImages = false,
this.checkerboardOffscreenLayers = false,
this.showSemanticsDebugger = false,
this.debugShowCheckedModeBanner = true,
})
Основная цель — перейти на загрузочную страницу, когда заставка закончится.
return MaterialApp(
debugShowCheckedModeBanner: false, // 去除调试
title: '孤岛',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreenPage(),
routes: {
'guidePages': (context) {
return GuidePages(); // 跳转到引导页面
}
},
);
Создайте таймер, чтобы дождаться окончания таймера, прыгать
/// 设计一个计时器，用来等计时器结束的时候，跳转
jumpPage(){
return Timer(duration, callback);
}
/// 源码其实是这样的
factory Timer(Duration duration, void callback()) {
if (Zone.current == Zone.root) {
// No need to bind the callback. We know that the root's timer will
// be invoked in the root zone.
return Zone.current.createTimer(duration, callback);
}
return Zone.current
.createTimer(duration, Zone.current.bindCallbackGuarded(callback));
}
- продолжительность - это задержка
- обратный вызов это обратный вызов, что делать в конце времени
Поскольку мы использовалиStatelessWidgetТо есть нам нужно вызвать метод перехода на страницу за один раз, а пока мы будем использовать виджеты с отслеживанием состояния.StatefulWidgetПолный код такой
import 'dart:async';
/// 闪屏的页面
import 'package:flutter/material.dart';
import '../utils/global.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class SplashScreenPage extends StatefulWidget {
SplashScreenPage({Key key}) : super(key: key);
@override
_SplashScreenPageState createState() => _SplashScreenPageState();
}
class _SplashScreenPageState extends State<SplashScreenPage> {
/// 设计一个计时器，用来等计时器结束的时候，跳转
jumpPage() {
return Timer(Duration(milliseconds: 3000), () {
Navigator.pushReplacementNamed(context, 'guidePages');
});
}
@override
void initState() {
super.initState();
jumpPage();
}
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
return Scaffold(
backgroundColor: Colors.white, // 背景色
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/splash_screen.jpg'),
fit: BoxFit.cover)), // 添加背景图片
child: Container(
child: Center(
child: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 30),
),
Text('欢迎来到孤岛',
style: TextStyle(
fontSize: fontSize40,
color: Colors.white10,
fontWeight: FontWeight.w600)),
SizedBox(
height: height100,
),
Text('By 洋小洋',
style: TextStyle(
fontSize: fontSize40,
color: Colors.white10,
fontWeight: FontWeight.w600))
],
),
),
),
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
// 线性渐变 有个渐变的过程
Color.fromRGBO(0, 0, 0, 0.2),
Color.fromRGBO(0, 0, 0, 0.5)
],
begin: FractionalOffset.topCenter, // 顶部居中
end: FractionalOffset.bottomCenter)), // 底部居中
),
));
}
}
Хорошо, давайте посмотрим на эффект, достигнутый вместе на этапах.
3.5 Загрузочная страница
После просмотра заставки мы ожидаем получить страницу руководства, которая, как следует из названия, ведет пользователя к следующему шагу, здесь мы используем сторонний пакет.intro_views_flutter 2.8.0
Текущая версия пакета2.8.0
| Имена пакетов | Отправить |
|---|---|
| intro_views_flutter | intro_views_flutter |
-
Добавьте это в файл pubspec.yaml пакета:
dependencies: intro_views_flutter: ^2.8.0 -
Вы можете установить пакеты из командной строки:
$ flutter pub get -
Теперь в коде Dart вы можете использовать:
import 'package:intro_views_flutter/intro_views_flutter.dart';
После волны потоковых операций его можно использовать.Конкретный метод использования все еще нужно смотреть на API
| Атрибуты | тип данных | описывать | По умолчанию |
|---|---|---|---|
| pageColor | Color | Установите цвет страницы. | Null |
| mainImage | Image / Widget | Устанавливает основное изображение для страницы. | Null |
| title | Text / Widget | Устанавливает текст заголовка страницы. | Null |
| body | Text / Widget | Задает тело страницы. | Null |
| iconImageAssetPath | String | Задает путь к изображению значка, который будет отображаться во всплывающем окне страницы. | Null |
| iconColor | Color | Устанавливает цвет значка пузырька страницы. | Null |
| bubbleBackgroundColor | Color | Устанавливает цвет фона пузырька страницы. | Colors.white / Color(0x88FFFFFF) |
| textStyle | TextStyle | Установите TextStyle для заголовка и тела | title: color: Colors.white , fontSize: 50.0 body: color: Colors.white , fontSize: 24.0
|
| titleTextStyle | TextStyle | Установите TextStyle заголовка | color: Colors.white , fontSize: 50.0 |
| bodyTextStyle | TextStyle | Установить TextStyle для тела | color: Colors.white , fontSize: 24.0 |
| bubble | Widget | Установить пользовательский виджет для внутреннего пузыря | null |
Затем мы определяемPageViewModel
PageViewModel(
pageColor: const Color(0xFF03A9F4),
// iconImageAssetPath: 'assets/air-hostess.png',
iconColor: Colors.pink,
bubbleBackgroundColor: Colors.pink,
// bubble: Image.asset('images/jiche.jpg'),
body: Text(
'这是属于你我的孤岛',
),
title: Text(
'No.1',
),
// titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
// bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
mainImage: Container(
decoration:
BoxDecoration(border: Border.all(width: 1, color: Colors.red)),
child: Image.asset(
// 图片
'images/jiche.jpg',
height: width750,
width: height1314,
fit: BoxFit.cover,
// alignment: Alignment.center, // 居中显示
),
)),
существуетimagesМы добавили еще несколько картинок в папку для отображения страницы путеводителя, некоторые фотоматериалы можно найти здесь.
Теперь эффект почти такой же, давайте посмотрим
4. Пишите в конце
Я рад, что у вас хватило терпения это увидеть, тем более в этой стремительной жизни и работе мы сегодня прошли две части этого пути
- заставка
- Страницы руководства
Уже 2:35 утра
Так как я смотрел это на этой неделе
Я вышел и снова побродил вокруг, но я еще не перестал обновляться.Это можно рассматривать как стимул для себя, поэтому, пожалуйста, поддержите меня, комментируйте и лайкайте, конечно, если это нормально, может быть, это появится в следующая глава [прочитать комментарии]
Я Ян Сяоян, увидимся в следующий раз, код в этом разделе будет синхронно обновлять складGitHub.com/AsianStudent/грипп ТТ…
--END