Я рекомендую вам начать строить макеты только с Row
и Column
, чтобы не запутаться. Я часто строю макеты следующим образом.
Row
и Column
. И установить свойства mainAxisAlignment
и crossAxisAlignment
в Row
и Column
. Padding
или Align
, Expanded
и т. Д. Вы также можете использовать Container
. Ссылка:
Базовая раскладка:
https://flutter.dev/docs/development/ Пользовательский интерфейс / макет
Советы по созданию макетов:
Надеюсь, вам это поможет.
пример кода:
Widget buildCard() {
return Container(
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color.fromARGB(100, 0, 0, 0),
blurRadius: 5,
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/card.png',
height: 62,
width: 62,
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.only(top: 12.0, left: 12.0),
child: Text(
"Hello world",
style: TextStyle(
fontWeight: FontWeight.w500,
letterSpacing: 0.8,
),
),
)
],
),
);
}
Вычислить доступную недвижимость в процентах:
<Grid.RowDefinitions>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="0.25*"/>
</Grid.RowDefinitions>
РЕДАКТИРОВАТЬ:
Это работает, но не указывает на то, как работает параметр *. Это:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
обеспечивает ту же функциональность. Если вам нужно что-то другое, кроме строк с одинаковой высотой, вы можете использовать:
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
, который разделит доступную высоту на 10 и сохранит относительную высоту каждой строки. В качестве альтернативы значения могут быть 0,1, 0,2, 0,3 и 0,4 или любое пропорциональное значение.
Элемент управления с прозрачным фоном НЕ запускает события IsMouseOver или IsMouseDirectlyOver. Например, если для Border Background установлено значение Transparent, но BorderBrush = Blue и BorderWidth = <> 0, события MouseOver будут срабатывать при переходе самой границы, но не внутри элемента управления.
Вставьте двойные кавычки в контент:
<Button Name="Button"
Background="AntiqueWhite"
Content="{}{Background="AntiqueWhite"}"/>
A Grid
с Фон
, оставленным по умолчанию или установленным с помощью кисти Transparent
, не вызовет событие IsMouseOver
, если курсор не находится над содержащим элементом управления. Чтобы событие запускалось по самой сетке
, смоделируйте Прозрачность
, установив Фон
на цвет фона контейнера
.
Включите фигурные скобки в содержимое элемента управления.
<Button Content="{}{This is not a markup extension.}"/>
IsMouseOver
и IsMouseDirectlyOver
- разные события. IsMouseOver
реагирует на все движения мыши внутри элемента управления и его дочерних элементов. IsMouseDirectlyOver
отвечает, только если курсор находится над самим элементом управления. Например, если у вас есть метка, содержащаяся внутри границы, событие IsMouseDirectlyOver
для границы срабатывает, только если курсор находится над самой границей, но НЕ над содержащейся меткой.
Set a debug style that provides visual cues:
<Window.Resources>
<Style x:Key="DebugGrid" TargetType="Grid">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ShowGridLines" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="Grid"
Style="{StaticResource DebugGrid}"
Background="Black">...
Новой функцией WPF, поставляемой с 3.5 SP1, является возможность форматировать строку во время привязки. Это исключает использование IValueConverter
для таких распространенных сценариев.
Вот несколько примеров, которые я скопировал из этого сообщения в блоге
<TextBox Text="{Binding Path=Double, StringFormat=F3}"/>
<TextBox Text="{Binding Path=Double, StringFormat=Amount: {0:C}}"/>
<TextBox Text="{Binding Path=Double, StringFormat=Amount: \{0:C\}}"/>
<TextBox>
<TextBox.Text>
<Binding Path="Double" StringFormat="{}{0:C}"/>
</TextBox.Text>
</TextBox>
Отладка привязки WPF.
Добавление трассировки для связанных свойств:
<Window …
xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase"/>
<TextBlock Text="{Binding Path=Caption,
diagnostics:PresentationTraceSources.TraceLevel=High}"…/>
В окне вывода вы получите подробную информацию о привязке:
PropertyChanged event from SomeObject (hash=1)
SetValue at level 0 from SomeObject (hash= 1) using RuntimePropertyInfo(Field):
'False'
TransferValue - got raw value 'False'
TransferValue - using final value 'False'
// ИЗМЕНИТЬ Подробнее здесь .
Ариэль
Свойство - BorderThickness . Независимо от того, сколько раз вы набираете BorderWidth, это не сработает!
Заполнение
и Поле
вводятся с использованием синтаксиса с разделителями-запятыми и имеют тип «Толщина». Их можно ввести как:
Видимость
- это система с тремя состояниями System.Windows. Видимость перечисление:
Укажите уникальную строку или столбец для GridSplitter
, чтобы гарантировать, что он не будет скрыт другими элементами управления и ведет себя должным образом.
Установите недвижимость в коде для динамического управления:
Border_Toolbar.SetResourceReference(BackgroundProperty, "Brush_ToolbarBackground")