Flutter 應用程式建立一個擴充套件皮膚列表

會煮咖啡的貓發表於2022-04-20
Flutter套件

原文

https://medium.flutterdevs.co...

參考

正文

瞭解如何在您的 Flutter 應用程式建立一個擴充套件皮膚列表

在本文中，我們將探討 ExpansionPanelList In Flutter. 。我們將實施一個擴充套件皮膚列表演示程式，並學習如何自定義其風格與不同的屬性在您的 Flutter 應用程式。

Expansion Panel List:

它是一個類似於 listView 的實質性 Flutter 小部件。它可以只有擴充套件皮膚作為兒童。在某些情況下，我們可能需要顯示一個列表，其中子元素可以展開/摺疊以顯示/隱藏一些詳細的資料。為了顯示這樣的列表 flutter，提供了一個名為 ExapansionPanelList 的小部件。

在這個列表中，每個子元素都是 expsionpanel 小部件。在這個列表中，我們不能使用不同的視窗小部件作為子視窗。我們可以藉助於 expsioncallback 屬性來處理事物的狀態調整(擴充套件或崩潰)。

演示模組:

這個演示視訊顯示瞭如何在一個 Flutter 擴充套件皮膚清單。它顯示如何擴充套件皮膚列表將工作在您的 Flutter 應用程式。它顯示了一個列表，在這個列表中孩子們可以展開/摺疊以顯示/隱藏一些詳細資訊。它會顯示在你的裝置上。

Constructor:

要使用 ExpansionPanelList，需要呼叫下面的建構函式:
const ExpansionPanelList({
  Key? key,
  this.children = const <ExpansionPanel>[],
  this.expansionCallback,
  this.animationDuration = kThemeAnimationDuration,
  this.expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding,
  this.dividerColor,
  this.elevation = 2,
})

Properties:

ExpansionPanelList 的一些屬性如下:
  • > children: 此屬性用於擴充套件皮膚 List 的子元素。它們的佈局類似於[ListBody]。
  • > expansionCallback: 此屬性用於每當按下一個展開/摺疊按鈕時呼叫的回撥。傳遞給回撥的引數是按下的皮膚的索引，以及皮膚當前是否展開。
  • > animationDuration: 這個屬性用於展開或摺疊時，我們可以觀察到一些動畫在一定時間內發生。我們可以通過使用擴充套件皮膚 List 的 animationDuration 屬性來更改持續時間。我們只需要提供以微秒、毫秒或分鐘為單位的持續時間值。
  • > expandedHeaderPadding: 此屬性用於展開時圍繞皮膚標頭的填充。預設情況下，16px 的空間是在擴充套件期間垂直新增到標題(上面和下面)。
  • > dividerColor: 當[ expsionpanel.isexpanded ]為 false 時，此屬性用於定義分隔符的顏色。如果‘ dividerColor’為空，則使用[ DividerThemeData.color ]。如果為 null，則使用[ ThemeData.dividerColor ]。
  • > elevation: 此屬性用於在擴充套件時定義[ expsionpanel ]的提升。這使用[ kElevationToShadow ]來模擬陰影，它不使用[ Material ]的任意高度特性。預設情況下，仰角的值為 2。

如何實現 dart 檔案中的程式碼:

你需要分別在你的程式碼中實現它:

在 lib 資料夾中建立一個名為 main.dart 的新 dart 檔案。

首先，我們將生成虛擬資料。我們將建立一個列表 <Map<String, dynamic>> 並新增變數 \_ items 等於生成一個列表。在這個列表中，我們將新增 number、 id、 title、 description 和 isExpanded。

List<Map<String, dynamic>> _items = List.generate(
    10,
        (index) => {
      'id': index,
      'title': 'Item $index',
      'description':
      'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
      'isExpanded': false
    });

在正文中，我們將新增 ExpansionPanelList() 小部件。在這個小部件中，我們將新增標高為 3，在括號中新增 expsioncallback 索引和 isExpanded。我們將新增 setState ()方法。在方法中，我們將新增 \_ items index equal not isExpanded。

ExpansionPanelList(
  elevation: 3,
  expansionCallback: (index, isExpanded) {
    setState(() {
      _items[index]['isExpanded'] = !isExpanded;
    });
  },
  animationDuration: Duration(milliseconds: 600),
  children: _items
      .map(
        (item) => ExpansionPanel(
      canTapOnHeader: true,
      backgroundColor:
      item['isExpanded'] == true ? Colors._cyan_[100] : Colors._white_,
      headerBuilder: (_, isExpanded) => Container(
          padding:
          EdgeInsets.symmetric(vertical: 15, horizontal: 30),
          child: Text(
            item['title'],
            style: TextStyle(fontSize: 20),
          )),
      body: Container(
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
        child: Text(item['description']),
      ),
      isExpanded: item['isExpanded'],
    ),
  )
      .toList(),
),

我們將增加 animationDuration 為 600 毫秒。我們將新增子節點，因為 variable_items 對映到 expsionpanel ()小部件。在這個小部件中，我們將新增 canTapOnHeader was true，backgroundColor，headerBuilder 返回 Container ()小部件。在這個小部件中，我們將新增填充，並在其子屬性上新增文字。在正文中，我們將新增 Conatiner 及其子屬性，我們將新增文字。當我們執行應用程式時，我們應該獲得螢幕輸出，就像下面的螢幕截圖一樣。

全部程式碼

import 'package:flutter/material.dart';
import 'package:flutter_expansion_panel_list/splash_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors._teal_,
        ),
        home: Splash());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Map<String, dynamic>> _items = List.generate(
      10,
          (index) => {
        'id': index,
        'title': 'Item $index',
        'description':
        'This is the description of the item $index. Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        'isExpanded': false
      });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Flutter Expansion Panel List Demo'),
      ),
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          elevation: 3,
          // Controlling the expansion behavior
          expansionCallback: (index, isExpanded) {
            setState(() {
              _items[index]['isExpanded'] = !isExpanded;
            });
          },
          animationDuration: Duration(milliseconds: 600),
          children: _items
              .map(
                (item) => ExpansionPanel(
              canTapOnHeader: true,
              backgroundColor:
              item['isExpanded'] == true ? Colors._cyan_[100] : Colors._white_,
              headerBuilder: (_, isExpanded) => Container(
                  padding:
                  EdgeInsets.symmetric(vertical: 15, horizontal: 30),
                  child: Text(
                    item['title'],
                    style: TextStyle(fontSize: 20),
                  )),
              body: Container(
                padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
                child: Text(item['description']),
              ),
              isExpanded: item['isExpanded'],
            ),
          )
              .toList(),
        ),
      ),
    );
  }
}

結語

在本文中，我已經簡單地解釋了 ExpansionPanelList 的基本結構; 您可以根據自己的選擇修改這段程式碼。這是一個小的介紹擴充套件/panellist On User Interaction 從我這邊，它的工作使用 Flutter。

© 貓哥

訂閱號

相關文章