無法在一列中使用兩個ListView獲得簡單的應用程式

我正在嘗試用兩個ListViews撰寫應用程式。這個想法很簡單。一開始我們n在 first 中有-element ListView，通過單擊元素我們將元素移動到第二個。像這樣的東西：

要得到：

為了簡化代碼，我創建了兩個全域變數串列（綠色和藍色）。但我面臨的問題是我不明白如何setState()從無狀態小部件呼叫。而且我不確定是否應該將顏色框更改為其他內容。

我應該把所有的小部件都做有狀態的嗎？如何觸發更新ListView？

我創建了復制粘貼示例：

import 'dart:convert';

import 'package:flutter/material.dart';

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

List blueList = [1,2,3,4,5,6,7,8];
List greenList = [];


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeView(),
      themeMode: ThemeMode.system,
    );
  }
}


class HomeView extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Scaffold( 
          appBar: AppBar(title: Text("Demo App"),),
          body: SafeArea( 

            child: Column(children: [
              WidgetOne(),
              WidgetTwo(),
            ],)
            
            ),

  );

  }
}

class _WidgetOneState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(child: ListView.builder(
            // shrinkWrap: true,
          itemBuilder: (ctx, idx) =>
              WidgetBlue(blueList[idx]), 
          itemCount: blueList.length));
  }
}

class WidgetOne extends _WidgetOneState {
  @override
  _WidgetOneState createState() => _WidgetOneState();
}


class _WidgetTwoState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(child: ListView.builder(
            // shrinkWrap: true,
          itemBuilder: (ctx, idx) =>
              WidgetGreen(greenList[idx]), 
          itemCount: greenList.length));

  }
}

class WidgetTwo extends _WidgetOneState {
  @override
  _WidgetTwoState createState() => _WidgetTwoState();
}


class WidgetBlue extends StatelessWidget {
  int index;
  WidgetBlue(this.index);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Center(
        child: Container(
          color: Colors.blue,
          height: 50,
          width: 90,
          child: Text("$index"),
        ),

      ),
      onTap: () { 
        blueList.removeLast();
      },
    );
  }

 }


class WidgetGreen extends StatelessWidget {
  int index;
  WidgetGreen(this.index);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Center(
        child: Container(
          color: Colors.green,
          height: 50,
          width: 90,
          child: Text("$index"),
        ),

      ),
      onTap: () { 
        // do not do nothing
      },
    );
  }

 }

uj5u.com熱心網友回復：

這是您的完整代碼：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
List blueList = [
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8
];
List greenList = [];

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: darkBlue,
        ),
        debugShowCheckedModeBanner: false,
        home: HomeView());
  }
}

class HomeView extends StatefulWidget {
  @override
  _HomeView createState() => _HomeView();
}

class _HomeView extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo App"),
      ),
      body: SafeArea(
          child: Column(
        children: [
          blueList.isNotEmpty ? Expanded(
              child: ListView.builder(
                  //  shrinkWrap: true,
                  itemBuilder: (ctx, idx) => InkWell(
                        child: Center(
                          child: Container(
                            color: Colors.blue,
                            height: 50,
                            width: 90,
                            child: Text("${blueList[idx]}"),
                          ),
                        ),
                        onTap: () {
                          setState(() {
                            int r = blueList.removeLast();
                            greenList.add(r);
                            print("remove $r");
                            print("size ${blueList.length}");
                          });
                        },
                      ),
                  itemCount: blueList.length) ) : Container(),
          Expanded(
        child: ListView.builder(
            // shrinkWrap: true,

            itemBuilder: (ctx, idx) => InkWell(
      child: Center(
        child: Container(
          color: Colors.green,
          height: 50,
          width: 90,
          child: Text("${greenList[idx]}"),
        ),
      ),
      onTap: () {
        setState(() {
          //TODO
        });
        // do not do nothing
      },
    ) ,
            itemCount: greenList.length))
        ],
      )),
    );
  }
}

在這里運行代碼

uj5u.com熱心網友回復：

更改StatelessWidget為StatefulWidget. 為簡單起見，右鍵單擊StatelessWidget并選擇創建StatefulWidget并呼叫 setState 之類的

onTap: () { 
        setState(() => blueList.removeLast());
      },

標籤：扑 镖

上一篇：單擊每個復選框串列后如何更新圓形百分比指示器

下一篇：為什么未等待的Future錯誤使我的測驗失敗？