背景:需要實現一個類似 elementui 級聯組件 https://element.eleme.cn/#/zh-CN/component/cascader 的搜索效果,選中了標籤顯示在前面,輸入框顯示在後面,佔滿整行中的剩餘部分,效果如下:
自己嘗試了很久,還是沒能實現,知道找到組件 wrapfit
安裝依賴:
wrapfit: ^0.1.0
代碼如下:
List<String> items = ['Item 0', 'Item 1'];
Widget _buildWrapFitDemo() {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('WrapFit 示例', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 16),
Wrap2(
runSpacing: 8,
spacing: 8,
children: <Widget>[
for (int i = 0; i < items.length; i++)
Container(
decoration: BoxDecoration(border: Border.all()),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(items[i]),
IconButton(
onPressed: () {
setState(() {
items.removeAt(i);
});
},
icon: const Icon(Icons.delete),
),
],
),
),
Wrapped(
// 如果子組件適合當前行,則其最大寬度將設置為剩餘空間。
// 否則它可以像 Wrap 一樣寬
fit: WrapFit.runLoose,
child: TextField(
autofocus: true,
decoration: const InputDecoration(
hintText: 'some text',
counterText: 'press ENTER to add',
),
onSubmitted: (String value) {
setState(() {
items.add(value);
});
},
),
),
],
),
],
),
);
}