Расширенный обзор
Expanded используется для расширенияRow,ColumnилиFlexсынchildВиджет. использоватьExpandedДочерние элементы [Row], [Column] или [Flex] можно расширить, чтобы заполнить доступное пространство на главной оси (например, [Row] по горизонтали или [Column] по вертикали). Если расширяется более одного дочернего узла, то в соответствии с[flex]Фактор делит доступное пространство на несколько дочерних узлов.
Виджеты [Expanded] должны быть потомками [Row], [Column] или [Flex], а путь от виджета [Expanded] к охватывающим его [Row], [Column] или [Flex] должен содержать только [StatelessWidget ] ] или [StatefulWidget] s (но не другие типы виджетов, такие как [RenderObjectWidget]).
Используйте сценарии, такие как пустая обработка слов списка и кнопок, использованных в предыдущей демонстрации, вы можете использовать расширенный для разумного выделения гибкого пространства для каждого виджета вместо использования фиксированного положения виджета, такого как positioned.Параметром выделения ключа является Flex .
Конструктор
const Expanded({
Key key,
int flex = 1,
@required Widget child,
})
- flex — коэффициент эластичности для распределения пространства,
Row,ColumnилиFlexFlex каждого Expanded представляет собой пропорцию распределения пространства, по умолчаниюint flex = 1 - child — это дочерний виджет, который необходимо выделить
образец кода
// expand
import 'package:flutter/material.dart';
class ExpandedLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Expand')
),
body: Row(children: <Widget>[
// 根据 flex系数，分配剩余空间
Expanded(
flex:2,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
),
)
),
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(colors: [Colors.red, Colors.orange]),
),
)
)
],
)
);
}
}