Через два дня после Национального дня я изучил и организовал волну флаттера дома, и в основном прошел все коды, которые я мог прочитать и увидеть.Статья длинная, рекомендуется сохранить (звездочка) и прочитать еще раз. Портал:Nealyang personal blog
предисловие
В конце концов, фронтенд родился.После нахождения (ци) и нахождения (ши) (бин) чувства (мэй) чувства (ру) и затем (мэн) это фактически UI-фреймворк, но его движок основан на C++, нижний слой основан на рендеринге Skia, а DartVM виртуализирован, Machine и Text и так далее...
21 июня 2018 г. Google выпустила первую предварительную версию Flutter.Как совершенно новая отзывчивая, кроссплатформенная, высокопроизводительная платформа для разработки мобильных приложений, энергично запущенная бабой Google, она обязательно станет популярной. Баба Google, конечно, сейчас становится все более и более популярной.Questions tagged [flutter]
В этой статье мы познакомим вас с основными понятиями флаттера, разберем общие виджеты, напишем общие демоверсии приложений и сдадимся~, надеясь помочь каждому новичку вроде меня. Если есть ошибка, надеюсь, Бог просветит меня~
Международная практика, поднимите волну первым~
двигаться прямоОфициальное объявление Flutter ppt
О дартс
В качестве вводной статьи для Flutter без Dart не обойтись.Конечно, в качестве вводной статьи для Flutter предварительная версия Dart не будет представлена слишком много.
Портал входа в дартс:Dart or Dart2, или изКитайский сайт дартсСредняя школа тоже хороша.
Здесь мы поговорим о том, почему именно Dart.
Многие ученые-лингвисты считают, что естественный язык, на котором говорит человек, влияет на то, как он думает. Вначале команда Flutter оценила более дюжины языков и, наконец, выбрала Dart, потому чтоЭто соответствует тому, как они создают пользовательские интерфейсы..
- Dart скомпилирован AOT, скомпилирован в быстрый и предсказуемый нативный код, так что почти все во Flutter можно написать в Dart, что не только делает Flutter быстрее, но и почти все можно настроить
- Dart также может быть скомпилирован JIT, цикл разработки чрезвычайно быстр, а рабочий процесс разрушает рутину, что также позволяет Flutter достичь очень горячей перезагрузки Diao с сохранением состояния (не говорите о других вещах, люди рождаются с вау)
- Dart упрощает создание плавных анимаций и переходов со скоростью 60 кадров в секунду. Dart может выполнять выделение объектов и сборку мусора без блокировок. Как и JavaScript, Dart избегает вытесняющего планирования и разделяемой памяти (и, следовательно, не требует блокировок). Поскольку приложения Flutter скомпилированы в собственный код, им не требуются медленные мосты между областями (например, JavaScript в собственный код). Он также запускается намного быстрее
- Dart позволяет Flutter не требовать отдельного языка декларативного макета, такого как JSX или XML, или отдельного построителя визуального интерфейса, поскольку макет декларативного программирования Dart легко читается и визуализируется. Все макеты на одном языке собраны в одном месте, Flutter легко предоставляет расширенные инструменты для упрощения макетов.
- Dart относительно дружелюбен к IOS, Android и Web FE.
Конкретные причины выбора Dart и перехода к тем, кто понимает DartПочему Flutter выбирает Dart
О флаттере
В начале контакта с флаттером неизбежно будут сомнения в сердце.Если есть разные кроссплатформенные мобильные разработки типа RN и Weex, то в чем преимущества флаттера? Посмотрите на фотографии, которые я украл из Интернета!
Краткая книга с исходным изображением
Everything is Widget
Есть поговорка, что разница между функциональными языками и императивными языками заключается в том, что императивные языки дают компьютеру инструкции, а функциональные языки описывают логику для компьютера. Этот ход мыслей отражен в пользовательском интерфейсе Flutter. Flutter не поддерживает манипулирование пользовательским интерфейсом и, конечно же, в основном не предоставляет API для манипулирования представлениями.Например, наши общие, такие как TextView.setText() и Button.setOnClick(), не будут существовать. Описание интерфейса может быть оцифровано (аналогично XML, JSON и т. д.), но работу интерфейса трудно оцифровать, что очень важно, а отзывчивость должна быть удобной и устойчивой для отображения данных в интерфейс.
Во Flutter Widget используется для описания интерфейса, Widget — это только «информация о конфигурации» View, при написании используются некоторые декларативные возможности языка Dart для получения удобочитаемости, аналогичной структурированному языку разметки. Виджеты образуют иерархию на основе макета. Каждый виджет встроен в него и наследует свойства своего родителя. Отдельного объекта «приложение» нет, вместо этого эту роль выполняет корневой виджет. Во Flutter все является виджетом, даже стили css.
<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
В флаттере мы пишем как
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
Вы можете увидеть стиль, определяемый шрифтом в нашем стиле css.В флаттере вам нужноnew TextStyle,TextStyleЭто виджет, и стиль должен воздействовать на дочерний элемент: текст в контейнере, а в вебе нет наследования стилей.
Одноклассники, которые только начали связываться с ним аналогичны тому, что есть в реакте.Все это компонент.По сути, виджет - это описание UI страницы. Его функция аналогична xml в android и jsx в react. Виджеты преобразуются в элементы при рендеринге. Элемент добавляет контекстную информацию к виджетам. element — это соответствующий виджет, созданный узел в дереве рендеринга. Поскольку виджеты неизменяемы, один и тот же виджет может одновременно описывать узлы в нескольких деревьях рендеринга. Но Element описывает точку, зафиксированную в определенном месте в визуализируемой книге. Проще говоря, виджеты можно повторно использовать в качестве описания, но элементы полностью соответствуют узлам, которые необходимо отрисовать. Является ли этот элемент окончательным отрендеренным видом? Извините, еще нет. Когда элемент будет отрисован, он будет преобразован в rendObject. RendObject — это объект, который фактически проходит через компоновку и отрисовку и рисуется на экране. Во флаттере есть три набора деревьев, связанных с рендерингом, а именно: дерево виджетов, дерево элементов и дерево rendObject. Процесс рендеринга трех выглядит следующим образом:
Есть ли ощущение jsx -> виртуальный дом -> настоящий дом~
Кхм, основные часто используемые виджеты будут представлены позже в некоторых демонстрациях, и у вас может быть более четкое представление об этом.
Композиция больше, чем наследование
Flutter многое заимствует из идеи реакции и даже включает в себя состояние, о котором будет сказано позже.
Сам виджет обычно состоит из множества меньших отдельных маленьких виджетов или даже настолько маленьких, что кажется, что он не имеет никакого эффекта, когда он один, а несколько комбинаций этих виджетов образуют мощный настраиваемый большой виджет.
Например, Container может быть div для Web FE и состоять из множества виджетов, которые отвечают за компоновку, отрисовку, позиционирование и размер. Мы можем использовать различные позы, чтобы комбинировать их вместо того, чтобы наследовать их. Иерархия классов неглубокая и широкая, чтобы максимизировать количество возможных комбинаций.
Рамки
Нижний уровень — это виртуальная машина Flutter Engine.На этом уровне вам необходимо понимать Skia.Skia — это графический движок, разработанный Google, включая графику, текст, изображения, анимацию и т. д. Он используется не только в браузере Google Chrome, но также в системе Android Skia используется в качестве механизма обработки чертежей.
Графический рендеринг:
жизненный цикл состояния:
Как новичок, глядя на картинку выше, немного туманно, и давайте сначала осознаем это~
Флаттер ходит вокруг
Я не буду вдаваться в подробности о проблеме среды Flutter. После этого ~ много хитов кода
Материальная версия базового виджета Hello world
Международная практика, привет мир
import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget{
MyAppBar({this.title});//
final Widget title;
@override
Widget build(BuildContext context){
return new Container(
height: 56.0,
padding: const EdgeInsets.symmetric(horizontal:8.0),
decoration: new BoxDecoration(
color:Colors.blue[400]
),
child: Row(
children: <Widget>[
new IconButton(
icon:new Icon(Icons.menu),
tooltip:'Navigation menu',
onPressed: (){
print('点击Menu');
},
),
new Expanded(
child:new Center(
child:title
)
),
new IconButton(
icon:Icon(Icons.search),
tooltip:'Search',
onPressed: (){
print('点击搜索按钮');
},
)
],
),
);
}
}
class MyScaffold extends StatelessWidget{
@override
Widget build(BuildContext context){
return Material(
child: new Column(
children:<Widget>[
new MyAppBar(
title:new Text(
'Hello World',
style:Theme.of(context).primaryTextTheme.title
),
),
new Expanded(
child:new Center(
child:Text('Hello World!!!')
)
)
]
),
);
}
}
void main(){
runApp(
new MaterialApp(
title:'My app',
home:new MyScaffold()
)
);
}
Этот пользовательский интерфейс действительно немного жаль, заголовок выше заблокирован. И не адаптируйте его сначала, мы можем использовать Scaffold, предоставленный Material позже.
Первый пример, сосредоточьтесь на коде (вспомните используемый виджет):
- Все является виджетом, и тот, что перед виджетом
newПо желанию. - Общие виджеты, такие как Container, Row, Column, Text, IconButton, Icon, BoxDecoration, Center, Expanded, используются в классах MyAppBar и MyScaffold.
- ContainerВиджет для рисования, позиционирования и изменения размера. Подобно div, мы можем использовать его для создания прямоугольного представления, а контейнер можно оформить какBoxDecoration, такие как фон, граница или тень. Контейнеры также могут иметь поля, отступы и ограничения, применяемые к их размеру. Кроме того, Контейнеры могут преобразовывать их в трехмерном пространстве с помощью матриц.
- Row,ColumnПо сути, это flex-direction в flex layout.
- ExpandedОн заполняет оставшееся свободное пространство, еще не занятое другими дочерними элементами. Расширенный может иметь несколько дочерних элементов. Затем используйте параметр flex, чтобы определить, какую долю оставшегося пространства они занимают. Подробнее см.:Разница между гибким и расширенным элементами управления флаттером
- Сначала определите класс MyAppBar, конструктор принимает заголовок виджета, на самом деле мы также можем принять
String titleТогда в класс иди самnew Title(title) - Функция runApp принимает данный виджет и использует его в качестве корня виджета.
- Основная задача виджета — реализовать функцию сборки для сборки самого себя. Виджет обычно состоит из нескольких виджетов более низкого уровня. Фреймворк Flutter будет создавать эти виджеты по очереди, пока не достигнет самого нижнего дочернего виджета, которым обычно является RenderObject, который вычисляет и описывает геометрию виджета.
Базовая версия интерактивного материала Hello world
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// app的根Widget
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
// 这是设置的app主题
// 运行后你可以看到app有一个蓝色的toobar，并且在不退出app的情况下修改代码会热更新
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// 这是应用中一个基类，继承自StateFulWidget，意味着这个类拥有一个state对象，该对象里的一些字段会影响app的UI
// 这个类是state的一些配置项。通过构造函数来获取值，这个值一般在State中消费，并且使用final关键字。其实类似于react中的defaultProps
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// setState方法告诉Flutter，这个State中有些值发生了变化，以便及时将新值更新到UI上，
// 如果我不通过setState更改_count字段，那么Flutter并不会调用build匿名函数去更新界面
_counter++;
});
}
@override
Widget build(BuildContext context) {
// build方法会在每次setState的时候重新运行，例如上面的_incrementCounter方法被调用
//Flutter已经被优化了重新构建的方法，所以你只会去更新需要去更新的部分，不必去单独更新里面的一些更细小的widget，类似于React中diff
return new Scaffold(
appBar: new AppBar(
// 这里我们使用从App.build方法中初始化MyHomePage时候传入的title值来设置我们的title
title: new Text(widget.title),
),
body: new Center(
// Center是一个布局Widget，他只有一个child（区分row or cloumn等是children），并且会将child的widget居中显示
child: new Column(
// Column也是一个布局widget，他可以有多个子widget
// Column 有很多的属性去控制他的大小以及子widget的位置，这里我们使用mainAxisAlignment来让children在垂直线上居中，
// 这里的主轴就是垂直的，因为Column就是垂直方向的，这里可以大概想象为display:flex，flex-directions:column,align-item,justifyContent。。。
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Hello World!',
style:TextStyle(
fontSize:24.0,
color: Colors.redAccent,
decorationStyle:TextDecorationStyle.dotted,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
decoration: TextDecoration.underline
)
),
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),//最后这个逗号有利于格式化代码
);
}
}
- Виджеты без состояния являются неизменяемыми, что означает, что их свойства нельзя изменить — все значения являются окончательными.
- Состояние виджетов с отслеживанием состояния может меняться в течение жизненного цикла виджета. Для реализации виджета с отслеживанием состояния требуется как минимум два класса: 1) класс StatefulWidget; 2) класс State. Сам класс StatefulWidget неизменен, но класс State находится в виджет Всегда существует в жизненном цикле
- При необходимости создайте заново. StatefulWidget может сохранять собственное состояние. Вопрос в том, раз виджеты неизменяемы, как сохранить состояние? Фактически, Flutter сохраняет состояние, вводя State. Когда состояние State изменяется, дерево виджетов этого узла и его дочерних элементов можно перестроить, чтобы внести изменения в пользовательский интерфейс. Примечание. Если вам нужно активно изменить состояние состояния, вам нужно активировать его с помощью метода setState().Простое изменение данных не приведет к изменению пользовательского интерфейса.
Также есть часть про ключ, который здесь не будет представлен, по сути, он похож на понятие ключа в реакте, что удобно для diff и повышает эффективность. В частности, вы можете просмотретьKey
На данный момент мы увидели некоторые основные способы использования Flutter, применение виджетов, написание стилей и регистрацию событий.Если мы изучим маршрутизацию, запросы и кэширование, сможем ли мы разработать собственные приложения?
Хорошо, укрепите интерфейс записи, давайте продемонстрируем~
Виджет макета
После того, как я написал его сам, я обнаружил, что он отличается от реализации на официальном сайте.кодовый адрес
Конкретная реализация может относиться кУчебник на официальном сайте
Я не буду здесь вдаваться в подробности, давайте поговорим о понимании и ощущении макета и часто используемых виджетах макета.
С точки зрения внешнего интерфейса, когда дело доходит до рисования интерфейса, он все еще может быть чувствителен к макету.
)
Конечно, здесь мы все еще говорим о широко используемом в настоящее время гибком макете, который в основном выглядит так, как показано выше, после того, как страница разделена с большой на маленькую.
Таким образом, макет виджета на самом деле является наиболее часто используемой строкой и столбцом, а затем из-за концепции Flutter все является компонентом, может быть необходимо использовать другие виджеты макета css, такие как: Container. На самом деле, давайте понимать его как блочный элемент!
Ниже приводится краткая демонстрация некоторых часто используемых виджетов, и я не буду здесь повторять строки и столбцы. Портал:Виджет макета
Container
Вы можете добавить отступы, поля, границы, цвет фона, обычно используемые для украшения других виджетов.
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context){
Container cell (String imgSrc){
return new Container(
decoration: new BoxDecoration(
border:Border.all(width:6.0,color:Colors.black38),
borderRadius: BorderRadius.all(const Radius.circular(8.0))
),
child: Image.asset(
'images/$imgSrc',
width: 180.0,
height: 180.0,
fit: BoxFit.cover,
),
);
}
return Container(
padding: const EdgeInsets.all(10.0),
color: Colors.grey,
child: new Column(
mainAxisSize: MainAxisSize.min,
children:<Widget>[
new Container(
margin: const EdgeInsets.only(bottom:10.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children:<Widget>[
cell('1.jpg'),
cell('2.jpg')
]
),
),
new Container(
margin: const EdgeInsets.only(bottom:10.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children:<Widget>[
cell('3.jpg'),
cell('4.jpg')
]
),
),
]
),
);
}
}
Каждое изображение в этом макете использует контейнер для добавления круглой серой границы и полей. Затем используйте контейнер, чтобы изменить цвет фона столбца на светло-серый.
GridView
Макет прокручиваемой сетки, понимаемый как отображение: сетка
GridView предоставляет два готовых списка, которые автоматически прокручиваются, когда GridView обнаруживает, что содержимое слишком длинное. Если вам нужно построить пользовательскую сетку, используйтеGridView.countилиGridView.extentчтобы указать разрешенное количество столбцов и максимальную ширину указанного элемента в пикселях.
List<Container> _buildGridTileList(int count) {
return new List<Container>.generate(
count,
(int index) =>
new Container(child: new Image.asset('images/${index+1}.jpg')));
}
Widget buildGrid() {
return new GridView.extent(
maxCrossAxisExtent: 150.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _buildGridTileList(10));
}
class MyHomePage extends StatelessWidget{
@override
Widget build(BuildContext context){
return new Center(
child: buildGrid(),
);
}
}
как указано вышеmaxCrossAxisExtent, мы можем напрямую указать количество колонок, как пример кода официального сайта:
new GridView.count(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: <Widget>[
const Text('He\'d have you all unravel at the'),
const Text('Heed not the rabble'),
const Text('Sound of screams but the'),
const Text('Who scream'),
const Text('Revolution is coming...'),
const Text('Revolution, they...'),
],
)
пройти черезcrossAxisCountУкажите количество столбцов напрямую.
Stack
Каскадная компоновка, расположение абсолютное чувство jio~
Используйте стек для организации виджетов, которые должны перекрываться. Виджет может полностью или частично перекрывать нижний виджет. Первый виджет в дочернем списке является базовым виджетом, последующие дочерние виджеты накладываются поверх базового виджета. Содержимое стека нельзя прокручивать. Немного похоже на ощущение установки absolute в weex. Нижний компонент всегда находится поверх верхнего компонента.
ListView
Прокручиваемые длинные списки, которые могут быть горизонтальными или вертикальными.
Card
Часто появляются компоненты в стиле Material, карточки, такие компоненты, как AntD и другие библиотеки компонентов.
Во флаттере Card имеет закругленные углы и тени, а изменение свойства возвышения Card может управлять эффектом тени.
ListTile
Компонент стиля материала, я понимаю его как стиль часто используемого элемента списка, до трех строк текста, необязательные значки до и в конце строки
Суммировать
Из моих собственных неглубоких навыков работы с Flutter самой большой трудностью может быть поиск подходящего виджета для достижения желаемого макета или эффекта, даже включая стиль CSS, воздействующий на этот виджет. Например, непрозрачность — это виджет, а не стиль CSS. ~
Так что для Flutter нам все еще нужно бросить и продемонстрировать больше, подобно многим имитациям xxxApps в Интернете и т. Д. ~
Для получения дополнительной информации об интерфейсе рисования вы также можете обратиться к учебнику на официальном веб-сайте:Flutter для веб-разработчиков
это только начало
Все во Flutter основано на виджетах Получение виджета похоже на получение английского слова Если слова и фразы все воровские, вы боитесь английского?
Не волнуйся, не волнуйся, я воспользуюсь фотографией брата Чжан Шэна, чтобы подавить всеобщий гнев~
Поэтому во Flutter огромная система компонентов, разобраться в которой нужно много времени.
!важнее:больше практики
Изначально последняя глава была объяснением демо, которое я написал~
Жаль, что оценка времени неточна, да и праздничная инерция упущена. . . Учитывая пространство, давайте добавим демо с имитацией XXX позже~~
учеба по обмену
Добро пожаловать в личную официальную учетную запись WeChat: выбор внешнего интерфейса с полным стеком, получение статей из первых рук и бесплатные преимущества для обмена электронными книгами с полным стеком
Ссылка на ссылку && хорошая рекомендация статьи
- Принцип Flutter и практика Meituan
- Флаттер от начального до продвинутого
- Виджет Flutter для быстрой посадки в машину
- Глубокое понимание разработки интерфейса Flutter
- Разница между гибким и расширенным элементами управления флаттером
- Общий виджет
- Эксперты Xianyu объясняют: практика парадигмы программирования Flutter React
- Детали макета флаттера
- Макеты зданий во Flutter
- Китайская сеть Flutter
Демо рекомендуется