Flutter 中的多類型列表視圖

Question

如何使用顫振顯示具有多種類型的列表視圖，例如（第 1 項：文本，第 2 項：帶文本的圖像......）？

這是代碼：我需要讓 ListView 在 item1 中顯示 onlyText，在 item2 中顯示 imageWithText 等等，我該怎么做？

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        SizedBox(height: 5),
        ListView.separated(
          shrinkWrap: true,
          itemBuilder: (context, index) => onlyText(),
          separatorBuilder: (context, index) => SizedBox(height: 10),
          itemCount: 100,
        ),
      ],
    ),
  );
}
}

Widget imageWithText() => Container(
    child: Card(
      child: Row(
        children: [
          Text(
            'sara ahmad',
            style: TextStyle(fontSize: 16),
          ),
          SizedBox(width: 10),
          Image.network(
            'https://th.bing.com/th/id/R.e3a5da5209f4c39f1899456c94371a6f?rik=mz9sVBWxRJKGgA&riu=http%3a%2f%2fmedia1.santabanta.com%2ffull1%2fAnimals%2fHorses%2fhorses-62a.jpg&ehk=o%2fS9l8DSJtUbl%2bYcrwLMJy6W4MfUby7bTUHRwJu7a%2bU%3d&risl=&pid=ImgRaw&r=0',
            width: 100,
            height: 100,
          ),
        ],
      ),
    ),
  );
Widget onlyText() => Container(
    child: Card(
      child: Row(
        children: [
          Text(
            'sara ahmad',
            style: TextStyle(fontSize: 16),
          ),
          SizedBox(width: 10),
          Text('Nour'),
        ],
      ),
    ),
  );

Answer 1

在itemBuilder ，您可以使用三元運算符?: ，即condition ? expr1 : expr2 condition ? expr1 : expr2 ，像這樣：

itemBuilder: (context, index) => index == 0 ? onlyText() : imageWithText(),

或者，如果您有超過 2 個項目的列表，它可能是這樣的（假設這些項目具有屬性bool isOnlyText ）：

itemBuilder: (context, index) => _chats[index].isOnlyText
    ? onlyText()
    : imageWithText(),

下面是上面第一個片段的結果：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        SizedBox(height: 5),
        Expanded(
          child: ListView.separated(
            shrinkWrap: true,
            itemBuilder: (context, index) =>
                index == 0 ? onlyText() : imageWithText(),
            separatorBuilder: (context, index) => SizedBox(height: 10),
            itemCount: 100,
          ),
        ),
      ],
    ),
  );
}

Answer 2

  ///crete an empty widget list
List<Widget> item_list=[];
  ///create a function to add data to list and call this function in the initstate
  add_items_to_list()async{
    item_list.add(Text(('data')));
    item_list.add(Image.asset('name'));
    ///add as much as you want
  }
  
  ///use widget as below
  Widget items()=>ListView(
    children: item_list,
  );

Answer 3

如果你想顯示靜態列表，你可以這樣做

itemBuilder: (context, index) => index.isEven
    ? onlyText()
    : imageWithText(),

或者你有動態數據然后按照下面

假設您有這樣的Model class列表

class Model{
 String text,
 String img,
}

var list = <Model>[]; //your data will be here

並檢查是否只有圖像，你需要像下面這樣的條件，所以在你的ListView中你可以像這樣檢查

itemBuilder: (context, index) => list[index].img == null
    ? onlyText()
    : imageWithText(),